use-actor

Direct React behavior.

Installation

npm install use-actor

Usage

import { useState } from 'react'
import useActor from 'use-actor'

function App() {
  const [result, setResult] = useState('')
  async function action (props: string) {
    await new Promise(resolve => setTimeout(resolve, 1000))
    setResult(props.toUpperCase())
  }
  const actor = useActor({ action })
  if (result) {
    return <p>{result}</p>
  }
  if (!actor.active) {
    return <button onClick={actor.activate}>Open</button>
  }
  if (actor.acting) {
    return <p>Loading...</p>
  }
  if (actor.errorMessage) {
    return <p>{actor.errorMessage}</p>
  }
  return (
    <>
      <button onClick={() => actor.act('hello')}>Act</button>
      <button onClick={actor.deactivate}>Close</button>
    </>
  )
}