⚠️ This project is not yet fully documented. The best way to explore the project is through its tutorials package.
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.
Learn more at state-designer.com.
- Create your state using a flexible, declarative syntax.
- Use collections to reuse code and clarify make your state.
- Create both global and local states.
@state-designer/core- Core library.@state-designer/react- React hook.
Using State Designer involves three steps:
- Create a state with a configuration object.
- Subscribe to the state's updates.
- Send events to the state.
Your exact usage will depend on your framework:
Note: This example uses the React package.
import React from "react"
import { useStateDesigner } from "@state-designer/react"
function App() {
const { data, send, can, whenIn } = useStateDesigner({
data: { count: 1 },
initial: "inactive",
states: {
inactive: {
on: { TOGGLED: { to: "active" } },
},
active: {
on: {
TOGGLED: { to: "inactive" },
CLICKED_PLUS: { if: "belowMax", do: "increment" },
CLICKED_MINUS: "decrement",
},
},
},
actions: {
increment(d) {
d.count++
},
decrement(d) {
d.count--
},
},
conditions: {
belowMax(d) {
return d.count < 10
},
},
})
return (
<div className="App">
<h2>{data.count}</h2>
<button
disabled={!can("CLICKED_MINUS")}
onClick={() => send("CLICKED_MINUS")}
>
-1
</button>
<button
disabled={!can("CLICKED_PLUS")}
onClick={() => send("CLICKED_PLUS")}
>
+1
</button>
<button onClick={() => send("TOGGLED")}>
{whenIn({
active: "Turn Off",
inactive: "Turn On",
})}
</button>
</div>
)
}
export default AppState Designer is heavily inspired by xstate. Note that, unlike xstate, State Designer does not adhere to the scxml spec.