https://github.com/steveruizok/state-designer

State management with statecharts.
https://github.com/steveruizok/state-designer

react statecharts typescript

Last synced: about 2 months ago
JSON representation

State management with statecharts.

• Host: GitHub
• URL: https://github.com/steveruizok/state-designer
• Owner: steveruizok
• License: mit
• Created: 2019-12-24T20:22:19.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:39:42.000Z (over 1 year ago)
• Last Synced: 2024-07-14T16:33:18.105Z (2 months ago)
• Topics: react, statecharts, typescript
• Language: HTML
• Homepage: https://state-designer.com
• Size: 6.82 MB
• Stars: 640
• Watchers: 14
• Forks: 23
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-list - state-designer

README

        
# State Designer

State Designer is a JavaScript and TypeScript library for managing the state of a user interface. It prioritizes the design experience, making it easy to experiment with ideas, iterate on solutions, and communicate the final result.

- **See examples in [React](https://codesandbox.io/s/state-designer-react-r0z0v) and [TypeScript](https://codesandbox.io/s/state-designer-react-typescript-op1qk).**

- **Learn more at [state-designer.com](https://state-designer.com).**

## Features

- Write [state-charts](https://statecharts.github.io/) in a simple declarative syntax.

- Create both global and local component states.

- Use selectors to subscribe to just the data you need.

## Packages

- [`@state-designer/core`](https://github.com/steveruizok/state-designer/tree/master/packages/core) - Core library.

- [`@state-designer/react`](https://github.com/steveruizok/state-designer/tree/master/packages/react) - React hook.

## Usage

Using State Designer involves three steps:

1. Create a state with a configuration object.

2. Subscribe to the state's updates.

3. Send events to the state.

Your exact usage will depend on your framework:

- [Usage in JavaScript](https://github.com/steveruizok/state-designer/tree/master/packages/core#usage)

- [Usage in React](https://github.com/steveruizok/state-designer/tree/master/packages/react#usage)

## Inspiration

State Designer is heavily inspired by [xstate](https://github.com/davidkpiano/xstate). Note that, unlike xstate, State Designer does not adhere to the [scxml spec](https://en.wikipedia.org/wiki/SCXML).

## Author

- [Steve Ruiz](https://twitter.com/@steveruizok)

## License

[MIT](https://oss.ninja/mit/steveruizok)