# essence-stepper

> Essence Steppers - Stepper component

Latest version **1.0.7** (published 2016-03-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install essence-stepper
pnpm add essence-stepper
yarn add essence-stepper
bun add essence-stepper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2016-03-25 |
| First published | 2016-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 412 |
| Author | Hetmann W. Iohan |
| Maintainers | essence_md |
| Keywords | color palette, component, essence, google material, grid lists, javascript, less css, less, lesscss, material components, material design framework, material design, material, module, react component, react components, react native, react, react-component, template, templates, tile, tiles, UI component, UI kit, UI kits, UI, widget, stepper, steper, steppers, stepers, progress, step, steps |

## Links

- npm: https://www.npmjs.com/package/essence-stepper
- Repository: https://github.com/Evo-Forge/Essence
- Homepage: http://getessence.io/
- Issues: https://github.com/Evo-Forge/Essence/issues
- npm.io page: https://npm.io/package/essence-stepper

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.x
- [essence-core](https://npm.io/package/essence-core.md) ^1.x

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2016-03-25
- 1.0.6 — 2016-03-04
- 1.0.5 — 2016-03-04
- 1.0.4 — 2016-03-03
- 1.0.3 — 2016-03-02
- 1.0.2 — 2016-03-02
- 1.0.1 — 2016-03-02

## README

# Essence Steppers - Stepper component

#### Options:
- **steps**: default `{}` empty object, see the example bellow to customize
- **editable**: default `true` or `false`
- **type**: default `horizontal` or `vertical`
- **currentStep**: initial step `0`
- **onContinue**: default callback `null`
- **onBack**: default callback `null`
- **activeColor**: default color `e-background-indigo-400`, use a background color class to change the default active color
- **inactiveColor**: default color `e-background-grey-400`, use a background color class to change the default inactive color

### How to use
```js
import Stepper from 'essence-stepper';

const Steps = {
  'editable': [
    {
      'title': (<Text>Select campaign settings</Text>),
      'content': (<Text className={'e-caption'}>Campaign settings</Text>)
    },
    {
      'title': (<Text>Create an ad group</Text>),
      'optional': (<Text>Optional</Text>),
      'content': (<Text className={'e-caption'}>Ad group</Text>)
    },
    {
      'title': (<Text>Create an ad</Text>),
      'content': (<Text className={'e-caption'}>Ad details</Text>)
    }
  ],
  'non-editable': [
    {
      'title': (<Text>Select campaign settings</Text>),
      'content': (<Text className={'e-caption'}>Campaign settings</Text>)
    },
    {
      'title': (<Text>Create an ad group</Text>),
      'content': (<Text className={'e-caption'}>Ad group</Text>)
    },
    {
      'title': (<Text>Create an ad</Text>),
      'content': (<Text className={'e-caption'}>Ad details</Text>)
    },
    {
      'content': (<Text className={'e-caption'}>Summary</Text>)
    }
  ]
};
```

```js
<Stepper steps={Steps['editable']} />

<Stepper editable={false} steps={Steps['non-editable']} onContinue={this.continueStep.bind(this)} onBack={this.backStep.bind(this)} />

<Stepper type={'vertical'} editable={false} steps={Steps['non-editable']} onContinue={this.continueStep.bind(this)} onBack={this.backStep.bind(this)} />

```

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