@xstate/react NPM | npm.io

5.0.3 • Published 1 month ago

Install

Weekly downloads

103,832

License

MIT

Repository

Last release

1 month 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 @dotdev-joel/hydrogen-react @dragneeldev/ui-react-liveness @commonalityco/ui-constraints @commonalityco/feature-constraints @commandbar/foobar @cutting/react-abortable-fetch @darkblock.io/avax-widget @darkblock.io/darkblock-widgets @darkblock.io/eth-widget @dev-sudh/react-bottom-sheet @denyspixelteh/sanity-plugin-s3-aws-files @coursebuilder/commerce-next @cafegene/utils @byondrnd/byondxr-web-visualizer-ui itk-viewer-bootstrap-ui itk-viewer-material-ui jas-react-spring-bottom-sheet lattice-fabricate kyb-app @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 @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 @alteredgraphite/storybook-addon-performance @bitwebsvc/lowcode-plugin-datasource-pane @bitwebsvc/lowcode-plugin-workflow-pane @bitwebsvc/plugin-usermanage-pane @bitski/waas-react-sdk @bilalajanjua/react-spring-bottom-sheet @buildeazy-gmbh/visualizer @breezechat/react @carousel-without-a-horse/client @cardscan.ai/insurance-cardscan-react @catsync/re-view @claimr/react-native-client @clerk/elements @clicktap/state @12joan/react-spring-bottom-sheet @0xcarbon/alore-auth-ui @achivx/editor-base @container-stack/mail-campaign-browser @cloudseedrive/amplify-ui-react @debtcollective/union-component @dcm-cloud/extension-measurement-tracking @denispronin/react-spring-bottom-sheet @dexkit/darkblock-evm-widget @digiforce-cloud/dvd-plugin-datasource-pane @connect2ic/react @connect2icmodclub/react @darkblock.io/evm-widget @darkblock.io/matic-widget @darkblock.io/sol-widget @darkblock.io/sol-widget-r16

1 month ago

3 months ago

4 months ago

5 months ago

7 months ago

8 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years 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

3 years ago

2 years ago

2 years ago

2 years ago

3 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

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

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

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