Hook - useFlower

Here, we are using the useFlower hook to obtain some essential functions for navigation and handling of the application flow.

useFlower as child ...

Utils Callback onEnter - onExit

onEnter (function): A callback function that is executed when entering the node state. It's useful for performing specific operations when the user transitions to this state.

onExit (function): A callback function that is executed when exiting the node state. It's useful for performing specific operations when the user leaves this state.

import React from 'react'
import Flower, { FlowerRoute, FlowerNavigate, FlowerNode } from '@stackhouseos/flower-react'

export const Page = () => {
  return (
    <Flower name="demo">
      <FlowerRoute id="start" to={{ step1: null }} />
      
      <FlowerNode id="step1" 
        to={{ step2: null }}

        // On mount component
        onEnter={() => console.log("enter on step1")}
        
        // On unmount component
        onExit={() => console.log("exit from step1")}
        >
        ...

        <FlowerNavigate action="onNext">
          <button>click me to go next</button>
        </FlowerNavigate>
      </FlowerNode>

      <FlowerNode id="step2">
        ...
      </FlowerNode>
    </Flower>
  )
}