React simple slider
npm install react-slide-outjavascript
import Slider from 'react-slide-out';
`
and include css file
javascript
import 'react-slide-out/lib/index.css';
`Usage
After you imported libs, somewhere in your component's code:
javascript
.
this.setState({isOpen: true}))}>Open Slider
.
footer={
}
isOpen={this.state.isOpen}
onOutsideClick={() => this.setState({isOpen: false}))}>
...Some heavy scrollable content...
`
!Image of SliderYou can play with react-slide-out >>here<<
props/options
#### isOpen
If passed slider will be render with slide-in animation
javascript
`#### onOutsideClick
It will fire a function if passed when user clicks on "modalWrapper area" (dimmed area)
javascript
this.setState({isOpen: false})} />
`#### title
If passed title will be rendered in header wrapper
javascript
`#### footer
If passed footer will be rendered
javascript
Some footer element #### verticalOffset
If passed slider and slider wrapper will be offset from top or bottom (e.g. useful when you have navigation/bottom bar and you don't want slider to render on top of it)
javascript
`#### foldMode
If passed slider will be enter a "fold" mode, where instead of closing it will fold to certain width(140px default). Note: isOpen and onOutsideClick props will do nothing in this mode and
javascript
`#### isFolded
Only works if in fold mode, obviously. Will fold modal to specified width or unfold it to natural width(default false)
javascript
`#### foldWidth
Only works if in fold mode, represents the width modal will take if isFolded prop is set to true
javascript
``Clone/download the repo followed by npm (i) install && npm start, so you can check this superior component in local. If you have any comment, suggestion, issue, please report it, as I will try to keep this component alive.