https://github.com/rahsheen/react-wizard

A flexible wizard component for react and react-native
https://github.com/rahsheen/react-wizard

hacktoberfest

Last synced: about 1 month ago
JSON representation

A flexible wizard component for react and react-native

• Host: GitHub
• URL: https://github.com/rahsheen/react-wizard
• Owner: rahsheen
• License: mit
• Created: 2018-10-04T01:23:28.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T11:34:05.000Z (about 1 year ago)
• Last Synced: 2024-12-02T16:27:30.930Z (about 1 month ago)
• Topics: hacktoberfest
• Language: TypeScript
• Homepage:
• Size: 6.71 MB
• Stars: 19
• Watchers: 4
• Forks: 2
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @rahsheen/react-wizard

[![Build Status](https://travis-ci.org/rahsheen/react-wizard.svg?branch=master)](https://travis-ci.org/rahsheen/react-wizard)

![npm (scoped)](https://img.shields.io/npm/v/@rahsheen/react-wizard.svg)

[![Coverage Status](https://coveralls.io/repos/github/rahsheen/react-wizard/badge.svg?branch=master)](https://coveralls.io/github/rahsheen/react-wizard?branch=master)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)

React Wizard is a flexible wizard / multi-step form component which can be used with React or React-Native.

Making use of render props (and hooks internally), React Wizard allows you to control exactly how each step is rendered. The ultimate goal will be to not only provide the tools to build a custom wizard, but also provide simpler API's for more specific use-cases.

## Examples

### Basic Usage

```javascript

  

    {({ nextStep, prevStep, currentIndex }) => {

      return (

        


          
Step {currentIndex}

          Back

          Next

        

      )

    }}

  

  


    

      {({ nextStep, prevStep, currentIndex, onChangeValue }) => (

        


          
Enter Your Username

          
Step {currentIndex}

           onChangeValue("username", e.target.value)}

          />

          Back

          Next

        

      )}

    

  

  

    {" "}

    // This step will not be rendered

    {({ nextStep, prevStep, currentIndex }) => (

      


        
Step {currentIndex}

        Back

        Next

      

    )}

  

  

    {({ nextStep, prevStep, currentIndex, onSubmit }) => (

      


        
Baz {currentIndex}

        Back

        Submit

      

    )}

  


```

### Usage with an Array of Components

```javascript

const steps = [1, 2, 3].map(index => (

  

    {({ nextStep, prevStep, onSubmit }) => (

      


        
Step {index}

        prev

        next

      

    )}

  

))


return 

```

### Combining Both

In this case, the array of `Wizard.Step` components is rendered before those specified as children of the Wizard component.

```javascript

const steps = [1, 2, 3].map(index => (

  

    {({ nextStep, prevStep, onSubmit }) => (

      


        
Step {index}

        prev

        next

      

    )}

  

))


return (

  

    

      {({ nextStep, prevStep, currentIndex, onSubmit }) => (

        


          
Baz {currentIndex}

          Back

          Submit

        

      )}

    

  

)

```


## Contributing

Feel free to dive in! [Open an issue](https://github.com/rahsheen/react-wizard/issues/new) or submit PRs.

React Wizard follows the [Contributor Covenant](http://contributor-covenant.org/version/1/3/0/) Code of Conduct.

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):

| [
pahosler](https://github.com/pahosler)
[💡](#example-pahosler "Examples") [🤔](#ideas-pahosler "Ideas, Planning, & Feedback") | [
Jody LeCompte](https://jodylecompte.com)
[⚠️](https://github.com/rahsheen/react-wizard/commits?author=jodylecompte "Tests") [🤔](#ideas-jodylecompte "Ideas, Planning, & Feedback") |

| :---: | :---: |

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!