5.0.3 • Published 1 month ago

@xstate/react v5.0.3

Weekly downloads
103,832
License
MIT
Repository
github
Last release
1 month ago

@xstate/react

This package contains utilities for using XState with React.

Quick start

  1. Install xstate and @xstate/react:
npm i xstate @xstate/react
  1. 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>
  );
};
@pubngo-stack/reservation-api-browser@parksunghyun0112/react-spring-bottom-sheet-updated@storz/core@storz/react@flyteorg/console@flyteoss/consolestorybook-performance-addon@hi4s/richie-educationn1k1tk-react-spring-bottom-sheetimiassist-agent@cutting/react-fetcher@cutting/use-abortds-widget@ekafyi/ekaui@react-native-norah/trotie@anima.org/db-widgt@infinitebrahmanuniverse/nolb-_xs@knapsack/app-ui@everything-registry/sub-chunk-1033web-marketing-starterstorybook-addon-performancestorybook-xstate-wcspider-visionvisualizer-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-uiitk-viewer-bootstrap-uiitk-viewer-material-uijas-react-spring-bottom-sheetlattice-fabricatekyb-app@wechange/frontend-core@yuntu/knowledge-graph-reacttrido95-xstate-newbaotri-xstatets-app-cliui-react-liveness-revpaytidus-uitrido95-xstatetrido95-xstate-reacttina-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
5.0.3

1 month ago

5.0.2

3 months ago

5.0.1

4 months ago

5.0.0

5 months ago

4.1.3

7 months ago

4.1.2

8 months ago

4.1.1

1 year ago

4.1.0

1 year ago

4.0.3

1 year ago

4.0.2

1 year ago

4.0.1

1 year ago

4.0.0-beta.11

1 year ago

4.0.0-beta.10

2 years ago

4.0.0-beta.12

1 year ago

4.0.0

1 year ago

4.0.0-beta.8

2 years ago

4.0.0-beta.7

2 years ago

4.0.0-beta.9

2 years ago

4.0.0-beta.6

2 years ago

4.0.0-beta.5

2 years ago

4.0.0-beta.4

2 years ago

4.0.0-alpha.2

2 years ago

3.2.2

2 years ago

4.0.0-beta.3

2 years ago

4.0.0-alpha.1

2 years ago

4.0.0-alpha.0

3 years ago

3.2.1

2 years ago

3.2.0

2 years ago

3.0.2

2 years ago

3.0.1

3 years ago

3.0.0

3 years ago

3.1.2

2 years ago

3.1.1

2 years ago

3.1.0

2 years ago

1.6.3

3 years ago

1.6.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.6.1

4 years ago

1.6.0

4 years ago

1.5.1

4 years ago

1.5.0

4 years ago

1.4.0

4 years ago

1.3.4

4 years ago

1.3.3

4 years ago

1.3.2

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.2.2

4 years ago

1.2.1

4 years ago

1.2.0

4 years ago

1.1.0

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-rc.7

5 years ago

1.0.0-rc.6

5 years ago

1.0.0-rc.5

5 years ago

1.0.0-rc.4

5 years ago

1.0.0-rc.3

5 years ago

1.0.0-rc.2

5 years ago

1.0.0-rc.1

5 years ago

1.0.0-rc.0

5 years ago

0.8.1

5 years ago

0.8.0

5 years ago

0.7.1

6 years ago

0.7.0

6 years ago

0.6.1

6 years ago

0.6.0

6 years ago

0.5.0

6 years ago

0.4.0

6 years ago

0.3.0

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.0

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago