https://github.com/mountainboooy/mb-react-walkthrough

Simple React component to realize walkthrough UI in your application.
https://github.com/mountainboooy/mb-react-walkthrough

component javascript onboarding react tutorial ui-components walkthrough

Last synced: 8 months ago
JSON representation

Simple React component to realize walkthrough UI in your application.

• Host: GitHub
• URL: https://github.com/mountainboooy/mb-react-walkthrough
• Owner: mountainboooy
• License: other
• Created: 2017-08-16T10:23:36.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-09-15T13:51:59.000Z (over 8 years ago)
• Last Synced: 2025-04-26T23:04:30.490Z (9 months ago)
• Topics: component, javascript, onboarding, react, tutorial, ui-components, walkthrough
• Language: JavaScript
• Homepage:
• Size: 510 KB
• Stars: 7
• Watchers: 0
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

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)




## Installation

```

npm install --save mb-react-walkthrough

```




## Import css to your project

```css

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

```




## Useage

```javascript

import Walkthrough from 'mb-react-walkthrough'

{this.setState({show: false})}}>

    

    	PAGE 1

    

    

    	PAGE 2

    

```




## 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          |              |




## Development

```

git clone git@github.com:mountainboooy/mb-react-walkthrough.git

cd mb-react-walkthrough

npm install

npm run:watch

```