Skip to content
LogoLogo

Steps

Render your steps with <StepRouter> and <Step> from @picked/react or @picked/svelte. Reach the active step through useStep() or getStep().

Reach the step context

Inside a Step component, or inside any component that a Step renders, call getStep() or useStep() to reach the reactive context of the step:

import { useStep, useStoreGlobal } from '@picked/react/hooks'
 
function ContactForm() {
  const { step, fields } = useStep()
  const currentStep = useStoreGlobal(step)
  const currentFields = useStoreGlobal(fields)
 
  return (
    <>
      <h1>{currentStep.label}</h1>
 
      {currentFields.map((field) => (
        <div key={field.id}>
          <label>{field.label}</label>
          <input
            name={field.id}
            value={field.value ?? ''}
            onChange={field.onChange}
            onBlur={field.onBlur}
          />
          {field.error && field.touched && <p className="error">{field.error.userMessage}</p>}
        </div>
      ))}
    </>
  )
}

getStep() in Svelte, and useStep() in React, return a StepContext with these properties:

PropertyTypeDescription
stepStore<ExperienceStep>A reactive store that holds the id and the label of the step
fieldsStore<FormField[]>A reactive store of the fields, with their current values, errors, and handlers
isActiveStore<boolean> (Svelte) / boolean (React)Whether the router holds this step as the active one
formObjectThe handlers for a form submission. See Forms.