0.1.2 • Published 7 years ago

mb-react-walkthrough v0.1.2

Weekly downloads
1
License
MIT
Repository
github
Last release
7 years ago

MB React Walkthrough

license npm npm

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://gyazo.com/4adb54887eddf9bd8c51a796da57badc

Installation

npm install --save mb-react-walkthrough

Import css to your project

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

Useage

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>

Props

PropTypeDefaultNote
classNamestring
widthnumber450
heightnumbe360
onHidefuncRequired
onClickBackdropfunc
onSlidefunc
onShowfunc
nextBtnTitlestringNex
backBtnTitlestringBack
closeBtnTitlestringClose
animatedbooltrue
animationDurationnumber200
showBackdropbooltrue
showIndicatorbooltrue
topSpacenumber100

Development

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