StepHike() — supabase Function Reference

Source Code

apps/docs/components/StepHike/index.tsx lines 5–35

const StepHike = ({ children }) => {
  const [activeStep, setActiveStep] = useState<{ titleId: string; step: number } | undefined>(
    undefined
  )

  // check if there are any children
  if (!children) throw 'StepHike component requires <StepHike.Step> children'

  const steps = children.filter((x: any) => {
    return x.type.name === 'Step'
  })

  useEffect(() => {
    if (steps.length > 0) {
      setActiveStep({
        titleId: steps[0].props.title.replaceAll(' ', '-').toLowerCase(),
        step: 0,
      })
    }
  }, [])

  // check if there is at least 1 StepHike subcomponent
  if (steps.length === 0 || !steps)
    throw 'StepHike component needs at least 1 <StepHike.Step> child'

  return (
    <div>
      <StepHikeContext.Provider value={{ activeStep, steps }}>{children}</StepHikeContext.Provider>
    </div>
  )
}