https://github.com/brunurd/clado

A React state machine based on Context API.
https://github.com/brunurd/clado

Last synced: 2 months ago
JSON representation

A React state machine based on Context API.

• Host: GitHub
• URL: https://github.com/brunurd/clado
• Owner: brunurd
• License: mit
• Created: 2021-06-13T06:16:21.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-07-18T15:54:49.000Z (5 months ago)
• Last Synced: 2024-10-07T09:08:21.554Z (3 months ago)
• Language: TypeScript
• Size: 181 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Clado

[![git last tag][img-github-tag-badge]][link-github-tags] [![npm last version][img-npm-version-badge]][link-npm]

A React state machine based on Context API.

---

## Usage:

### StateMachine

The main component of `clado` is the `StateMachine`, where you can pass a bunch of components in the `states` using the state name as a key.

```jsx

import { StateMachine } from 'clado';

const App = () => {

  return (

    

      
React State Machine

       ,

          b: () => ,

        }}

      />

    

  );

};

```


### setState

To change the current state you can use the `setState` function of the `StateMachineContext`.

```jsx

import { useStateMachine } from 'clado';

const ComponentA = () => {

  const { setState } = useStateMachine();

  return (

    <>

      
Component A

       setState('b')}>Go To B

    >

  );

};

```


---

## Data Management

### Initial Data

The `StateMachine` accepts a data object to share data between the states.

```jsx

import { StateMachine } from 'clado';

const App = () => {

  return (

    

      
React State Machine

       ,

          b: () => ,

        }}

      />

    

  );

};

```


### Update Data

The way to update this data is using the `setState` function of the `StateMachineContext`. It only overrides the passed fields, any other will be preserved.

```jsx

const { setState } = useStateMachine();

    setState('b', {

      textValue: 'new text value',

    })

  }

>

  Go To B

;

```

### Reading Data

Is possible to access this data using the `data` returned of the `StateMachineContext`.

```tsx

const { data } = useStateMachine<{ textValue: string }>();

{data.textValue}
;

```


Or in the states declaration as a parameter in the function.

```tsx

}

  states={{

    a: (data) => ,

    b: (data) => ,

  }}

/>

```

[img-github-tag-badge]:https://img.shields.io/github/v/tag/brunurd/clado?style=flat-square

[img-npm-version-badge]:https://img.shields.io/npm/v/clado/latest?style=flat-square

[link-github-tags]:https://github.com/brunurd/clado/tags

[link-npm]:https://www.npmjs.com/package/clado