# mb-react-walkthrough

> MB React Walkthrough is a simple React component to realize walkthrough UI in your application. With this UI, You can add tutorials, onboardings and short storires very easliy.

Latest version **0.1.2** (published 2017-09-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install mb-react-walkthrough
pnpm add mb-react-walkthrough
yarn add mb-react-walkthrough
bun add mb-react-walkthrough
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2017-09-15 |
| First published | 2017-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Takeru Yoshihara |
| Maintainers | mountainboooy |
| Keywords | react, walkthrough, tutorial, modal, onboarding, ui, design |

## Links

- npm: https://www.npmjs.com/package/mb-react-walkthrough
- Repository: https://github.com/mountainboooy/mb-react-walkthrough
- Homepage: https://github.com/mountainboooy/mb-react-walkthrough#readme
- Issues: https://github.com/mountainboooy/mb-react-walkthrough/issues
- npm.io page: https://npm.io/package/mb-react-walkthrough

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^15.6.1
- [bowser](https://npm.io/package/bowser.md) ^1.7.3
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2017-09-15
- 0.1.1 — 2017-09-09
- 0.0.1 — 2017-09-08

## README

# MB React Walkthrough
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()
[![npm](https://img.shields.io/npm/dt/mb-react-walkthrough.svg)]()
[![npm](https://img.shields.io/npm/dm/mb-react-walkthrough.svg)]()

MB React Walkthrough is a simple React component to realize walkthrough UI in your application. With this UI, You can add tutorials, onboardings and short storires very easliy.

[![https://gyazo.com/8451169dc63303bdc655a30363aafe45](https://i.gyazo.com/8451169dc63303bdc655a30363aafe45.gif)](https://gyazo.com/8451169dc63303bdc655a30363aafe45)
[![https://gyazo.com/4adb54887eddf9bd8c51a796da57badc](https://i.gyazo.com/4adb54887eddf9bd8c51a796da57badc.gif)](https://gyazo.com/4adb54887eddf9bd8c51a796da57badc)

<br/>

## Installation

```
npm install --save mb-react-walkthrough
```

<br/>

## Import css to your project

```css
@import './node_modules/mb-react-walkthrough/src/dist/css/mb-react-walkthrough'
```

<br/>

## Useage

```javascript
import Walkthrough from 'mb-react-walkthrough'

<Walkthrough onHide={()=>{this.setState({show: false})}}>
    <Walkthrough.Content>
    	PAGE 1
    </Walkthrough.Content>
    <Walkthrough.Content>
    	PAGE 2
    </Walkthrough.Content>
</Walkthrough>

```

<br/>

## Props

| Prop            | Type         | Default      | Note         |
|:----------------|:------------:|:------------:|:------------:|
| className       | string       |              |              |
| width           | number       | 450          |              |
| height          | numbe        | 360          |              |
| onHide          | func         |              | Required     |
| onClickBackdrop | func         |              |              |
| onSlide         | func         |              |              |
| onShow          | func         |              |              |
| nextBtnTitle    | string       | Nex          |              |
| backBtnTitle    | string       | Back         |              |
| closeBtnTitle   | string       | Close        |              |
| animated        | bool         | true         |              |
| animationDuration| number      | 200          |              |
| showBackdrop    | bool         | true         |              |
| showIndicator   | bool         | true         |              |
| topSpace        | number       | 100          |              |


<br/>

## Development

```
git clone git@github.com:mountainboooy/mb-react-walkthrough.git
cd mb-react-walkthrough
npm install
npm run:watch
```

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