# react-progression

> A component that can manage steps in a progression-based workflow

Latest version **3.0.0** (published 2017-09-28) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-progression
pnpm add react-progression
yarn add react-progression
bun add react-progression
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2017-09-28 |
| First published | 2017-09-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jake Rios |
| Maintainers | jacobrios |
| Keywords | react, workflow |

## Links

- npm: https://www.npmjs.com/package/react-progression
- npm.io page: https://npm.io/package/react-progression

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2017-09-28
- 2.1.0 — 2017-09-27
- 2.0.0 — 2017-09-27
- 1.1.0 — 2017-09-21

## README

## The problem

You need to manage a step-based workflow and you want to be able to move between steps. You also want the flexibility to be able to control the rendering of your steps.

## This solution

This is a component that manages the state of your steps while providing you the flexibility to render your workflow in any way that you need to. It uses a [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) to give you the flexibility you need to render your workflow without having to think about managing the state of which step is active.

## Installation

````bash
npm install --save react-progression
````

## Usage

````javascript
import Progression from 'react-progression';

function SimpleWorkflow({ steps }) {
  return (
    <Progression
      steps={steps}
      render={({ getSteps, getStepActions }) => {
          const { activatePreviousStep, activateNextStep } = getStepActions();
          const { previousStep, activeStep, nextStep } = getSteps();
          return (
            <div>
              {previousStep !== undefined ? <button onClick={activatePreviousStep}>Previous</button> : null}
              {React.cloneElement(activeStep)}
              {nextStep !== undefined ? <button onClick={activateNextStep}>Next</button> : null}
            </div>
          )}}
    />
  );
}

function App() {
  const steps = [
    <div id='step-1'>I am the first step</div>,
    <div id='step-2'>I am the second step</div>,
    <div id='step-3'>I am the third step</div>,
    <div id='step-4'>I am the fourth step</div>,
    <div id='step-5'>I am the fifth step</div>
  ];

  return <SimpleWorkflow steps={steps} />;
}
````

`Progression` is the only component. It does not render anything itself. It calls the render function and renders that.

## Props

### steps
> `arrayOf(PropTypes.object)` | *required*

Pass an array of steps that will be used by the component to determine the previous, active, and next steps

### initialStep
> `PropTypes.object`

The step that will be set as the first active step.

### render

> `PropTypes.func` | *required*

This is called with an object. Read more about the properties passed to the render function in the section "Render Function prop".

## Render Function prop

This is the function that will determine what to render based on the state of the `Progression` component. The function is passed as the render prop `<Progression steps={[...]} render={/* here */} />`.

### `getStepActions`

These are actions that can be invoked to change the state of the ``Progression`` component

| property              | type                            | description                                                                                                 |
|----------------------	|--------------------------------	|------------------------------------------------------------------------------------------------------------	|
| activateFirstStep     | `function()`                    | Activate the first step in the progression regardless of its current state                                  |
| activateLastStep      | `function()`                    | Activate the last step in the progression regardless of its current state                                   |
| activatePreviousStep  | `function()`                    | Activate the previous step in the progression. If there is no previous step to activate, this is a `noop`   |
| activateNextStep      | `function()`                    | Activate the next step in the progression. If there is no next step to activate, this is a `noop`           |
| createStepActivator   | `function(selector: Function)`  | Activate a step based on the selector function                                                              |

### `getSteps`

These are the steps from the array that can be used within render

| property      | type                    | description                           |
|--------------	|------------------------	|--------------------------------------	|
| previousStep  | `object` / `undefined`  | The step that was previously active   |
| activeStep    | `object`                | The step that is currently active     |
| nextStep      | `object` / `undefined`  | The step that will be activated next  |


## Inspiration

The goal was to make a simple API for managing workflow states while still giving a lot of flexibility control to the users. The methods used in this project were inspired by [Kent C. Dodds](https://github.com/kentcdodds) and his work on the [downshift](https://github.com/paypal/downshift) project.


## License

MIT

---
_Source: https://npm.io/package/react-progression · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._