https://github.com/sebinsua/react-redux-wizard

:sparkles: A simple wizard for React.
https://github.com/sebinsua/react-redux-wizard

forms predicates react reducer redux steps wizard wizards

Last synced: 3 months ago
JSON representation

:sparkles: A simple wizard for React.

• Host: GitHub
• URL: https://github.com/sebinsua/react-redux-wizard
• Owner: sebinsua
• License: unlicense
• Created: 2016-12-08T15:14:54.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-27T18:21:02.000Z (almost 8 years ago)
• Last Synced: 2024-10-07T15:09:44.128Z (4 months ago)
• Topics: forms, predicates, react, reducer, redux, steps, wizard, wizards
• Language: JavaScript
• Homepage:
• Size: 120 KB
• Stars: 10
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `react-redux-wizard` [![Build Status](https://travis-ci.org/sebinsua/react-redux-wizard.png)](https://travis-ci.org/sebinsua/react-redux-wizard) [![npm version](https://badge.fury.io/js/react-redux-wizard.svg)](https://npmjs.org/package/react-redux-wizard)

> A simple wizard for React.

This component allows you to represent the flow of a wizard with JSX.

> **NOTE:** I have not worked on an integration with a React router, so if you require [deep-linking](https://en.wikipedia.org/wiki/Deep_linking) it's not quite ready. It is however completely functional for wizards within modals, and for small sign-up wizards, etc.

## Example

```js

import React from 'react'

import { Wizard, Step, match } from 'react-redux-wizard'

const StepOne = ({ name, previous, next }) =>

  
{name}

const StepTwo = ({ name, previous, next }) =>

  
 0.5 ? 'extra-flow' : null })}>{name}

const StepThree = ({ name, previous, next }) =>

  
{name}


function SomeFormWizard () {

  return (

    

      

      

      

      

    

  )

}

export default SomeFormWizard

```

## Install

```sh

yarn add react-redux-wizard

```

## API

### Reducer

Your root reducer should use the `reducer` exported by this module against its `wizards` key.

### Component

#### `{...steps}`

#### ``

`StepPredicate` is an `Array<{ predicate: JsonPredicate, to: string }>` where `JsonPredicate` [follows the JSON Predicate spec](https://github.com/MalcolmDwyer/json-predicate). `match(string, StepNameToValues)` is just sugar for generating these predicates when given some `Step` names and the associated `values` to check for at a `pathName`.

We can pass a functions in but we really shouldn't as doing so means that the store can no longer be fully serialized. However, it is possible:

> `StepFn` has the form `(values: KeyValueObject, wizardState: KeyValueObject) => ?string`

and can be used to pick the next step depending on either the values emitted from a component,

or some of the wizard's internal state.

#### ` void} next={(values: KeyValueObject) => void} />`

`` should receive two functions `previous` and `next`.

`previous` will take zero arguments and go to the previous step,

while `next` expects a `values` key-value object.

These are different functions from the ones you passed into ``.