api.md

useMatches

Works like the Matches component, but returning a boolean so you can use it imperatively.

---

Check TUseMatches to see the type/signature of the hook: https://github.com/marceloadsj/jsxstate/blob/master/src/types.ts

Args	Required	Type	Default	Description
value	yes	TMatchesValue		compares the value prop against the state or the context of the machine
options	no	TMatchesShared		options as an object to configure the hook behavior

options	Required	Type	Default	Description
machineId	no	string		targets the machine by the id it was registered on Interpret
context	no	string		points to the context of the machine with dot notation
not	no	boolean		reverses the final comparison to return a inverse boolean

Examples:

const counterMachine = Machine({
  initial: 'idle',
  states: {
    idle: {}
  }
  /* ... */
})

function Parent() {
  return (
    <Interpret machine={counterMachine}>
      <Child />
    </Interpret>
  )
}

// Boolean of state.value === "idle"
function Child() {
  const isIdle = useMatches('idle')

  return /* ... */
}

const userMachine = Machine(/* ... */)

function Parent() {
  return (
    <Interpret machine={counterMachine}>
      <Child />
    </Interpret>
  )
}

// The context prop can be used to target a state.context key
function Child() {
  const isNotSubscribed = useMatches(false, {
    context: 'user.subscribed'
  })

  return /* ... */
}