@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 @cafegene/utils @byondrnd/byondxr-web-visualizer-ui 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 @clerk/elements @cloudseedrive/amplify-ui-react @claimr/react-native-client @clicktap/state @h4wldev/react-spring-bottom-sheet @happykit/auth @happykit/auth-email @edgeandnode/gds @edgeandnode/components @common-stack/frontend-stack-react @container-stack/mail-campaign-browser @coursebuilder/commerce-next @connect2ic/react @connect2icmodclub/react @commonalityco/feature-constraints @commonalityco/ui-constraints @commandbar/foobar @wechange/frontend-core @yuntu/knowledge-graph-react trido95-xstate-new baotri-xstate ts-app-cli ui-react-liveness-revpay tidus-ui trido95-xstate trido95-xstate-react tina-graphql-gateway @buildeazy-gmbh/visualizer @breezechat/react @carousel-without-a-horse/client

8 months ago

10 months ago

10 months ago

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

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

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

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago