carloslfu / Use Machine
Licence: mit
React Hook for using Statecharts powered by XState. use-machine.
Stars: ✭ 226
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Use Machine
xstate-cpp-generator
C++ State Machine generator for Xstate
Stars: ✭ 33 (-85.4%)
Mutual labels: state-management, state-machine
Redux Machine
A tiny library (12 lines) for creating state machines in Redux apps
Stars: ✭ 338 (+49.56%)
Mutual labels: state-machine, state-management
statebot
Write more robust and understandable programs. Statebot hopes to make Finite State Machines a little more accessible.
Stars: ✭ 24 (-89.38%)
Mutual labels: state-management, state-machine
fs2-es
Event sourcing utilities for FS2
Stars: ✭ 75 (-66.81%)
Mutual labels: state-management, state-machine
React Context Hook
A React.js global state manager with Hooks
Stars: ✭ 50 (-77.88%)
Mutual labels: state-machine, state-management
useStateMachine
The <1 kb state machine hook for React
Stars: ✭ 2,231 (+887.17%)
Mutual labels: state-management, state-machine
Beedle
A tiny library inspired by Redux & Vuex to help you manage state in your JavaScript apps
Stars: ✭ 329 (+45.58%)
Mutual labels: state-machine, state-management
tstate-machine
TypeScript implementation of State Manager(like StateMachine)
Stars: ✭ 20 (-91.15%)
Mutual labels: state-management, state-machine
Little State Machine
📠 React custom hook for persist state management
Stars: ✭ 654 (+189.38%)
Mutual labels: state-machine, state-management
Machinery
State machine thin layer for structs (+ GUI for Phoenix apps)
Stars: ✭ 367 (+62.39%)
Mutual labels: state-machine, state-management
statebot-sh
Statebot for shell-scripts. Write more robust and understandable programs.
Stars: ✭ 14 (-93.81%)
Mutual labels: state-management, state-machine
kstatemachine
KStateMachine is a Kotlin DSL library for creating finite state machines (FSM) and hierarchical state machines (HSM).
Stars: ✭ 63 (-72.12%)
Mutual labels: state-management, state-machine
xstate-viz
Visualizer for XState machines
Stars: ✭ 274 (+21.24%)
Mutual labels: state-management, state-machine
use-state-machine
Use Finite State Machines with React Hooks
Stars: ✭ 28 (-87.61%)
Mutual labels: state-management, state-machine
zedux
⚡ A high-level, declarative, composable form of Redux https://bowheart.github.io/zedux/
Stars: ✭ 43 (-80.97%)
Mutual labels: state-management, state-machine
asyncmachine
Relational State Machine with a visual inspector
Stars: ✭ 67 (-70.35%)
Mutual labels: state-management, state-machine
xstate
State machines and statecharts for the modern web.
Stars: ✭ 21,286 (+9318.58%)
Mutual labels: state-management, state-machine
Pvm
Build workflows, activities, BPMN like processes, or state machines with PVM.
Stars: ✭ 348 (+53.98%)
Mutual labels: state-machine, state-management
When Ts
When: recombinant design pattern for state machines based on gene expression with a temporal model
Stars: ✭ 112 (-50.44%)
Mutual labels: state-machine, state-management
use-machine
Use Statecharts in React powered by XState, using the useMachine
hook. This is a minimalistic implementation (just 30 lines) that integrates React and XState.
Install it with: npm i use-machine
See --> the live example here!.
Let's build something with it:
import React, { useContext } from 'react'
import ReactDOM from 'react-dom'
import { assign } from 'xstate/lib/actions'
import { useMachine } from 'use-machine'
const incAction = assign(context => ({ counter: context.counter + 1 }))
const machineConfig = {
initial: 'Off',
context: {
counter: 0
},
states: {
Off: { on: { Tick: { target: 'On', actions: [incAction, 'sideEffect'] } } },
On: { on: { Tick: { target: 'Off', actions: incAction } } }
}
}
const MachineContext = React.createContext()
function App() {
const machine = useMachine(machineConfig, {
actions: {
sideEffect: () => console.log('sideEffect')
}
})
function sendTick() {
machine.send('Tick')
}
return (
<div className="App">
<span
style={{
backgroundColor: machine.state.matches('Off') ? 'red' : 'yellow'
}}
>
{machine.state.matches('Off') ? 'Off' : 'On'}
</span>
<button onClick={sendTick}>Tick</button>
Pressed: {machine.context.counter} times
<MachineContext.Provider value={machine}>
<div className="childs">
<Child />
</div>
</MachineContext.Provider>
</div>
)
}
function Child() {
const machine = useContext(MachineContext)
return (
<div>
<div>
Child state: {machine.state.matches('Off') ? 'Off' : 'On'}
</div>
<div>Child count: {machine.context.counter}</div>
<OtherChild />
</div>
)
}
function OtherChild() {
const machine = useContext(MachineContext)
function sendTick() {
machine.send('Tick')
}
return (
<div>
<div>
OtherChild state: {machine.state.matches('Off') ? 'Off' : 'On'}
</div>
<div>OtherChild count: {machine.context.counter}</div>
<button onClick={sendTick}>Tick 2</button>
</div>
)
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
TypeScript
This library is written in TypeScript, and XState too, so we have excellent support for types.
Example:
import React, { useContext } from 'react'
import ReactDOM from 'react-dom'
import { MachineConfig } from 'xstate'
import { assign } from 'xstate/lib/actions'
import { useMachine, TCreateContext } from './use-machine'
type TContext = {
counter: number
}
type TSchema = {
states: {
Off: {},
On: {}
}
}
type TEvent = {
type: 'Tick'
}
const incAction = assign<TContext>(context => ({ counter: context.counter + 1 }))
const machineConfig: MachineConfig<TContext, TSchema, TEvent> = {
initial: 'Off',
context: {
counter: 0
},
states: {
Off: { on: { Tick: { target: 'On', actions: [incAction, 'sideEffect'] } } },
On: { on: { Tick: { target: 'Off', actions: incAction } } }
}
}
type TMachine = TCreateContext<TContext, TSchema, TEvent>
const MachineContext = React.createContext<TMachine>({} as TMachine)
function App() {
const machine = useMachine<TContext, TSchema, TEvent>(machineConfig, {
actions: {
sideEffect: () => console.log('sideEffect')
}
})
function sendTick() {
machine.send('Tick')
}
return (
<div className="App">
<span
style={{
backgroundColor: machine.state.matches('Off') ? 'red' : 'yellow'
}}
>
{machine.state.matches('Off') ? 'Off' : 'On'}
</span>
<button onClick={sendTick}>Tick</button>
Pressed: {machine.context.counter} times
<MachineContext.Provider value={machine}>
<div className="childs">
<Child />
</div>
</MachineContext.Provider>
</div>
)
}
function Child() {
const machine = useContext(MachineContext)
return (
<div>
<div>
Child state: {machine.state.matches('Off') ? 'Off' : 'On'}
</div>
<div>Child count: {machine.context.counter}</div>
<OtherChild />
</div>
)
}
function OtherChild() {
const machine = useContext(MachineContext)
function sendTick() {
machine.send('Tick')
}
return (
<div>
<div>
OtherChild state: {machine.state.matches('Off') ? 'Off' : 'On'}
</div>
<div>OtherChild count: {machine.context.counter}</div>
<button onClick={sendTick}>Tick 2</button>
</div>
)
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].