@synerise/ds-wizard NPM

id: wizard

title: Wizard

Wizard UI Component

Installation

npm i @synerise/ds-wizard
or
yarn add @synerise/ds-wizard

Usage

import Wizard from '@synerise/ds-wizard'

<Wizard
  visible={true}
  title={'Wizard title'}
  onClose={handleClose}
  headerAction={<Button onClick={() => {}}>Save and skip wizard</Button>}
  onPrevStep={handlePrevStep}
  onNextStep={handleNextStep}
  contentWidth={'588px'}
  texts={{
    prevButtonLabel: 'Back',
    nextButtonLabel: 'Next step',
  }}
  stepper={
    <Stepper>
      ...
    </Stepper>
  }
  stepButtonProps={{
    prevButtonProps: {
      type: 'primary'
    },
    nextButtonProps: {
      type: 'primary',
      disabled: true
    }
  }}
  footer={
    <>
      <Button mode="icon-label" type="ghost" onClick={() => {}}>
        <Icon component={<AcademyM />} /> AI Search Help
      </Button>
    </>
  }
>
  Content
</Wizard>

Demo

API

Property	Description	Type	Default
stepper	Stepper component	React.ReactNode	-
footer	Content of footer	React.ReactNode	-
title	Title of wizard	React.ReactNode \ string	-
headerAction	Additional button in header	React.ReactNode	-
onClose	Function called when user clicks on close wizard button	() => void	-
visible	Whether wizard is visible	boolean	false
contentWidth	Width of content ex: `500px`	string	`100%`
onPrevStep	Function called when user clicks on prev step button	() => void	-
onNextStep	Function called when user clicks on next step button	() => void	-
stepButtonProps	Custom props for prev/next buttons	WizardStepButtons	-
texts	Translations object for wizard	WizardTexts	-

WizardTexts

Property	Description	Type	Default
prevButtonLabel	Label of prev button	React.ReactNode \ String	-
nextButtonLabel	Label of next button	React.ReactNode \ String	-

WizardStepButtons

Property	Description	Type	Default
prevButtonProps	Props of prev button	Partial<Omit<ButtonProps, 'onClick'>>	-
nextButtonLabel	Props of next button	Partial<Omit<ButtonProps, 'onClick'>>	-

@synerise/ds-button @synerise/ds-icon @synerise/ds-layout @synerise/ds-modal @synerise/ds-page-header @synerise/ds-utils classnames react-dom react-intl

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-890 @zalastax/nolb-_syn

2 days ago

2 days ago

11 days ago

15 days ago

23 days ago

25 days ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

7 months ago

7 months ago

10 months ago

10 months ago

10 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

10 months ago

8 months ago

8 months ago

7 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

9 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago