Package Exports

@equinor/fusion-react-stepper
@equinor/fusion-react-stepper/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@equinor/fusion-react-stepper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@equinor/fusion-react-stepper

Stepper

Properties/Attributes

for stepper

Name	Type	Default	Description
`initialStepKey`	`string / undefined`	`/`	Sets the initial step key for an uncontrolled stepper component. If undefined the stepper will use the first step as initial step.
`stepKey`	`string / undefined`	`/`	Used for making the stepper a controlled component. If it is set then it is the property that decides the currentStep and initialStepKey is ignored.
`forceOrder`	`boolean`	`false`	Can't skip steps. Steps will have specific order.
`verticalSteps`	`boolean`	`false`	Change stepper layout to vertical. Vertical positioning of steps.
`hideNavButtons`	`boolean`	`false`	Show/hide next and previous navigation buttons for stepper.
`onChange`	`(stepKey: string, allSteps: StepKey[]) => void`		onChange event for active step.

for step

Name	Type	Default	Description
`stepKey`	`string`	`/`	Step key of step. Used for activeStepKey. `required`
`title`	`string`	`/`	Title of step
`description`	`string`	`/`	Description of step
`disabled`	`boolean`	`false`	Disable step. Can't be clicked, but can manually navigate to it

Example Usage

Uncontrolled usage

import { Stepper } from '@equinor/fusion-react-stepper';

<Stepper initialStepKey="step1" onChange={(e, k) => console.log('active: ', e, ' keys: ', k)} props>
  <Step title="Title 1" stepKey="step1" props>
    Step content 1
  </Step>
  <Step title="Title 2" stepKey="step2" props>
    Step content 2
  </Step>
  <Step title="Title 3" stepKey="step3" props>
    Step content 3
  </Step>
</Stepper>

Controlled usage

import { Stepper } from '@equinor/fusion-react-stepper';

const [activeStep, setActiveStep] = useState<string>('step1');
const onChangeStep = (stepKey: string, allSteps: StepKey[]) => {
    console.log('active: ', stepKey, ' keys: ', allSteps)
    if (activeStep !== stepKey) {
        setActiveStep(String(stepKey));
    }
};

return (
    <Stepper stepKey={activeStep} onChange={onChangeStep} props>
      <Step title="Title 1" stepKey="step1" props>
        Step content 1
      </Step>
      <Step title="Title 2" stepKey="step2" props>
        Step content 2
      </Step>
      <Step title="Title 3" stepKey="step3" props>
        Step content 3
      </Step>
    </Stepper>
);