Sweet Form Wizard For React

A module to handle with Form Wizards in ReactJS applications easier.

Features:

  •  Full Typescript support: It embraces Typescript for real! It accepts interfaces and types as generics for their data structures and more!
  •  Better Developer Experience (DX): It enforces some conventions in order to make sure we got you covered! Issues with things such as specific components that needs to be used, which component is incorrect and context that needs to be used as wrapper will be raised straightaway on development environment.
  • Covers different usage and scenarios: It covers simple usage, but also covers scenarios when you have steps being added dinamically, specific validation steps that needs to be added, data structures that should be passed on, etc. The sky is the limit here!
  •  No external dependencies: And that’s exactly what you read. This is a zero-dependencies package, so you can integrate with Material-UI, Chakra-UI or any other Design System you might be using – including your own. Feel free to integrate with your workflow as you wish
  • Small bundle: All of that in only 1.58KB

How to use it:

1. Install and import the Sweet Wizard.

# Yarn
$ yarn add react-sweet-wizard

# NPM
$ npm i react-sweet-wizard
import {
  useWizardContext,
  WizardProvider,
  Steps,
  Step,
} from 'react-sweet-wizard';

2. Basic usage.

const Progress = () => {
  const { activeStepIndex, steps } = useWizardContext();
  return (
    <div>
      State {activeStepIndex + 1} of {steps.length}
    </div>
  );
};
const WizardSteps = () => (
  <Steps>
    <Step key="0" id="0">
      <div>
        <p>step 1</p>
      </div>
    </Step>
    <Step key="1" id="1">
      <div>
        <p>step 2</p>
      </div>
    </Step>
  </Steps>
);
const App = () => (
  <WizardProvider>
    <Progress />
    <WizardSteps />
  </WizardProvider>
);
export default App;

Preview:

Sweet Form Wizard For React

Download Details:

Author: willmendesneto

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/willmendesneto/react-sweet-wizard#demo

License: MIT

You Might Be Interested In:

Add Comment