useVariantState

A hook for defining strict state descriptors and transitions. It's based on Variant Type and inspired by Finite State Machines.

Installation

npm install --save @app-elements/use-variant-state

Usage

import { useState } from 'react'
import { useVariantState } from '@app-elements/use-variant-state'

const SignupForm = (props) => {
  // We're holding the user inputs in these local state references
  const [email, setEmail] = useState()
  const [password, setPassword] = useState()

  // Let's define out variant state!
  const {
    checkState,
    transitionTo,
    SavingEmail,
    SavedEmail,
    Failed
  } = useVariantState({
    initial: 'Initial',
    states: {
      Initial: [],
      SavingEmail: [],
      SavedEmail: [],
      Failed: [String]
    },
    transitions: {
      Initial: ['SavingEmail'],
      SavingEmail: ['SavedEmail', 'Failed']
    },
    effects: {
      SavingEmail: () => {
        request({ endpoint: 'users/signup', method: 'post', data: { email } })
        promise
          .then(() => {
            transitionTo(SavedEmail)
          })
          .catch(err => {
            transitionTo(Failed(err.msg || 'Failed to signup'))
          })
      },
      SavedEmail: () => {
        // Do something after SignUp!
      },
      Failed: (reason) => {
        showErrorNotification(reason)
      }
    }
  })
}

Props

| Prop | Type | Default | Description | |------------------------|------------|---------------|---------------------| | initial | String | None | Which state to initialize with | states | Object | None | An object to create your Variant Type | transitions | Object | None | For each key of your Variant Type, define an array of other keys which are valid to transition to | effects | Object | None | Define side effects when a new state is transitioned to