npm i @simple-state-machine/core @simple-state-machine/react
import {useMachine} from '@simple-state-machine/react'
import ThemeMachine from './theme-machine';
function Theme({children}){
const {state, send} = useMachine(ThemeMachine)
const themeClassName = state.value === 'light' ? 'light-mode' : 'dark-mode'
const toggleTheme = () => send('TOGGLE');
return (
<>
<button onClick={toggleTheme}>Toggle Theme</button>
<div className={themeClassName}>
{children}
</div>
</>
)
}- If you are new to
simple-state-machine, it is recommended to go through the core package - In order to understand the API in depth, please go through the api-documentation