@xstate/react NPM | npm.io

5.0.0 • Published 11 days ago

Install

Weekly downloads

103,832

License

MIT

Repository

Last release

11 days ago

@xstate/react

This package contains utilities for using XState with React.

Quick start

Install xstate and @xstate/react:

npm i xstate @xstate/react

Import the useMachine hook:

import { useMachine } from '@xstate/react';
import { createMachine } from 'xstate';

const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: {
      on: { TOGGLE: 'active' }
    },
    active: {
      on: { TOGGLE: 'inactive' }
    }
  }
});

export const Toggler = () => {
  const [state, send] = useMachine(toggleMachine);

  return (
    <button onClick={() => send({ type: 'TOGGLE' })}>
      {state.value === 'inactive'
        ? 'Click to activate'
        : 'Active! Click to deactivate'}
    </button>
  );
};

state machine statechart scxml state graph react hook

use-isomorphic-layout-effect use-sync-external-store

@pubngo-stack/reservation-api-browser @parksunghyun0112/react-spring-bottom-sheet-updated @storz/core @storz/react @flyteorg/console @flyteoss/console storybook-performance-addon @hi4s/richie-education n1k1tk-react-spring-bottom-sheet imiassist-agent @cutting/react-fetcher @cutting/use-abort ds-widget @ekafyi/ekaui @react-native-norah/trotie @anima.org/db-widgt @infinitebrahmanuniverse/nolb-_xs @knapsack/app-ui @everything-registry/sub-chunk-1033 web-marketing-starter sanity-plugin-instagram sanity-plugin-external-dam sanity-plugin-external-files sanity-plugin-dashboard-widget-vercel secsync-react-automerge secsync-react-yjs retool-react-spring-bottom-sheet react-window-splitter storybook-addon-performance storybook-xstate-wc spider-vision visualizer-machines @wechange/frontend-core @yuntu/knowledge-graph-react trido95-xstate-new baotri-xstate lingo3d-demo lattice-fabricate itk-viewer-material-ui itk-viewer-bootstrap-ui hydrogen-react-dev intercosm lowcode-plugin-datasource-pane-ccs lowcode-plugin-datasource-pane-ccs2 guiw5-bottom-sheet jas-react-spring-bottom-sheet nebi near-payments luu-tru-van-ban mansa pii-state-machine polyglot-po-cli obii productive-auth productive-feed nextstep-payments-gn0lee react-enable react-pin-hook react-spring-bottom-sheet react-spring-bottom-sheet-container-ref react-spring-bottom-sheet-fixed react-spring-bottom-sheet-minimum react-spring-bottom-sheet-modified react-spring-bottom-sheet-no-resize-anim react-spring-bottom-sheet-temp2 react-spring-bottom-sheet-updated myfirstpackage-payments react-native-rook-logger-react-native react-inline-edit-async react-konva-network-graph react-native-awesome-av-player react-router-animation-switch react-use-auth react-tree-manager reflame reflame-cli riec ts-app-cli ui-react-liveness-revpay tidus-ui trido95-xstate trido95-xstate-react tina-graphql-gateway @amerej/connect2ic-react @amerej/react @antimatterhq/onboarding @anchor-indexer/c7t @atrilabs/canvas-runtime @atrilabs/component-style-layer @admin-layout/demo-chakra-browser @airsoko/react @alilc/lowcode-plugin-datasource-pane @ballerine/workflows-dashboard @aws-amplify/ui-react @aws-amplify/ui-react-auth @aws-amplify/ui-react-liveness @aws-amplify/ui-react-core @aws-amplify/ui-react-core-auth @beecomm/rsbs @baotri95.dev/machine

11 days ago

2 months ago

3 months ago

7 months ago

9 months ago

10 months ago

11 months ago

12 months ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2.0.0-pr2674-2021926101023

3 years ago

2.0.0-pr2674-20219515814

3 years ago

2.0.0-pr2674-202191175724

3 years ago

2.0.0-pr2674-20219612435

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago