https://github.com/jonathanpalma/react-simple-step-wizard
A simple and composable step wizard in React
https://github.com/jonathanpalma/react-simple-step-wizard
multipage multistep react react-step-wizard step-wizard wizard wizard-steps
Last synced: about 1 year ago
JSON representation
A simple and composable step wizard in React
- Host: GitHub
- URL: https://github.com/jonathanpalma/react-simple-step-wizard
- Owner: jonathanpalma
- License: mit
- Created: 2019-06-16T08:18:20.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T10:49:47.000Z (over 3 years ago)
- Last Synced: 2024-10-28T17:13:11.872Z (over 1 year ago)
- Topics: multipage, multistep, react, react-step-wizard, step-wizard, wizard, wizard-steps
- Language: TypeScript
- Homepage: https://jonathanpalma.github.io/react-simple-step-wizard
- Size: 2.99 MB
- Stars: 8
- Watchers: 3
- Forks: 1
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
react-simple-step-wizard 🧙
A simple and composable step wizard in React! Made with ❤ in El Salvador 🇸🇻
[![Version][version-badge]][package]
[![Build][build-badge]][build]
[![Install Size][size-badge]][package-size]
[![Downloads][downloads-badge]][npmcharts]
[![PRs Welcome][prs-badge]][prs]
[![Commitizen friendly][cz-badge]][cz]
[![MIT License][license-badge]][license]
[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]
[![Tweet][twitter-badge]][twitter]
## Demo
[Click here](https://jonathanpalma.github.io/react-simple-step-wizard/) to see a live demo!
## Getting Started
### Installation
```
npm install -S react-simple-step-wizard
```
### Usage
```javascript
import Wizard from 'react-simple-step-wizard';
import React, { Component } from 'react';
const Step1 = () =>
This is Step 1;
const Step2 = () => This is Step 2;
const Step3 = () => This is Step 3;
const Step4 = () => This is Step 4;
const Step5 = () => This is Step 5;
const Step6 = () => This is Step 6;
const MyStepTracker = ({ currentStep = 0, steps = [] }) => (
Current step is: {steps[currentStep]}
);
const MyNavigator = ({
getFirstStepProps,
getLastStepProps,
getNextStepProps,
getPrevStepProps,
}) => (
<< First
< Back
Next >
Last >>
);
class App extends Component {
state = { isCustomizeVisible: true };
handleStepChange = currentStep => {
console.log(currentStep);
};
onClick = () => {
this.setState(prevState => ({
isCustomizeVisible: !prevState.isCustomizeVisible,
}));
};
render() {
const { isCustomizeVisible } = this.state;
return (
react-simple-step-wizard demo
Step 3 visible: {isCustomizeVisible.toString()}
Toggle Step 3
{/* You can implement your custom components via render-props */}
{stepTrackerProps => }
{navigatorProps => }
);
}
}
export default App;
```
## Roadmap
### V1
Provide an accessible and composable API to be used with older react versions that don't support hooks.
### V2
Rewrite lib core and expose some of the APIs using react hooks.
## License
MIT © [jonathanpalma](https://github.com/jonathanpalma)
[downloads-badge]: https://img.shields.io/npm/dm/react-simple-step-wizard.svg?style=flat-square
[license-badge]: https://img.shields.io/npm/l/react-simple-step-wizard.svg?style=flat-square
[license]: https://github.com/jonathanpalma/react-simple-step-wizard/blob/master/LICENSE
[npmcharts]: http://npmcharts.com/compare/react-simple-step-wizard
[package-size]: https://packagephobia.now.sh/result?p=react-simple-step-wizard
[package]: https://www.npmjs.com/package/react-simple-step-wizard
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[build-badge]: https://img.shields.io/circleci/build/gh/jonathanpalma/react-simple-step-wizard?style=flat-square
[build]: https://circleci.com/gh/jonathanpalma/react-simple-step-wizard
[cz-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square
[cz]: http://commitizen.github.io/cz-cli/
[size-badge]: https://flat.badgen.net/packagephobia/install/react-simple-step-wizard
[version-badge]: https://img.shields.io/npm/v/react-simple-step-wizard.svg?style=flat-square
[github-watch-badge]: https://img.shields.io/github/watchers/jonathanpalma/react-simple-step-wizard.svg?style=social
[github-watch]: https://github.com/jonathanpalma/react-simple-step-wizard/watchers
[github-star-badge]: https://img.shields.io/github/stars/jonathanpalma/react-simple-step-wizard.svg?style=social
[github-star]: https://github.com/jonathanpalma/react-simple-step-wizard/stargazers
[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-simple-step-wizard!%20https://github.com/jonathanpalma/react-simple-step-wizard
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/jonathanpalma/react-simple-step-wizard.svg?style=social