APPENDIX D

Flow Chart

Drives the Screens Walkthrough below it.

HANDLE: flow-chart
LIVES IN: src/components/FlowChart.jsx
USED ON: Chapters that declare a flow
PROPS: steps · activeStep · onStepSelect

EXAMPLE

LIVE

As it renders.

¶ FLOWCLICK A STEP TO WALK THROUGH

6 surfaces, one path

CODE

COPY AND PASTE

How it is called.

JSX

import FlowChart from '../components/FlowChart.jsx'

const [activeStep, setActiveStep] = useState(0)
<FlowChart steps={cs.flow} activeStep={activeStep} onStepSelect={setActiveStep} />

RULES

What must stay true.

Drives the Screens Walkthrough below it.

EXAMPLESFLOW CHART

¶ FLOWCLICK A STEP TO WALK THROUGH

6 surfaces, one path

CODE

JSX

import FlowChart from '../components/FlowChart.jsx'

const [activeStep, setActiveStep] = useState(0)
<FlowChart steps={cs.flow} activeStep={activeStep} onStepSelect={setActiveStep} />