@xstate/react NPM | npm.io

5.0.3 • Published 8 months ago

Install

Weekly downloads

103,832

License

MIT

Repository

Last release

8 months 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 storybook-addon-performance storybook-xstate-wc spider-vision visualizer-machines itk-viewer-bootstrap-ui itk-viewer-material-ui jas-react-spring-bottom-sheet lattice-fabricate kyb-app hypaas-lowcode-plugin-datasource-pane guiw5-bottom-sheet intercosm hydrogen-react-dev lingo3d-demo mansa lowcode-plugin-datasource-pane-ccs lowcode-plugin-datasource-pane-ccs2 luu-tru-van-ban @wen620/ohif-extension-measurement-tracking @webapper/amplify-ui-react @ttoss/auth @twilio-labs/plugin-signal2020 @twilio-labs/plugin-signal2021 @twilio-labs/plugin-signal2022 @therjfelix/userfront-react @tpr/core @tpr/layout @villagekit/product @villagekit/parameters @userfront/toolkit @unveiler.io/react-native-client @useoptic/ui @useoptic/ui-v2 @useoptic/openapi-diff @xstate-wizards/wizards-of-react @xstate/viz @xyfinance/widget @zoomit/react-mobile-sheet @yumaokao/arxiv-pdfs @yuntu/light-react @test-changesets/react @zhubangyun/lowcode-plugin-datasource-pane ajr-components ayush987goyal-amplify-ui-react-liveness attio aridhia-pipeline-ui async-data-hooks backstage-client @pandolink/utils @ohif/extension-measurement-tracking @nwachu/fileverse-sync @nwachu/sync @nordnet/ui @norceio/core @nipe-solutions/react-spring-bottom-sheet @ombori/grid-conversation-assistant @onerecord/react-ui @onerecord/widgets @oranjbase/icp-wallet-adapter-react @nlarew/docs-feedback-widget @picpico-labs/bifrost-react @portabletext/editor @portabletext/plugin-character-pair-decorator @portholeship/cross-button @peter_prog/services @outsmartly/hydrogen-react @outsmartly/shopify-hydrogen @outsmartly/shopify-hydrogen-react @owdin/live-common @playerone_eth/dev-client gatsby-theme-gatsbyjs-website @shipula/cli @shopify/storefront-kit-react @shopify/hydrogen-react @statecharts/xstate-viz @statechannels/xstate-wallet @statelyai/sky-react @staccx/bento @sxungchxn/react-payments @tasty0brains/react-spring-bottom-sheet

8 months ago

10 months ago

11 months 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

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

2.0.0-pr2674-2021926101023

4 years ago

2.0.0-pr2674-20219515814

4 years ago

2.0.0-pr2674-202191175724

4 years ago

2.0.0-pr2674-20219612435

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

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

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago