react-sliding-side-panel
Demo
Installation and usage
The easiest way to use react-sliding-side-panel is to install it from npm and build it into your app with Webpack.
npm install --save react-sliding-side-panel
Then use it in your app:
;; const App = { const openPanel setOpenPanel = ; return <div> <div> <button onClick= >Open</button> </div> <SlidingPanel type='left' isOpen=openPanel size=30 > <div> <div>My Panel Content</div> <button onClick= >close</button> </div> </SlidingPanel> </div> ;}; ;
Props
Common props you may want to specify include:
type
- left | right | top | bottom, specify the sliding panel positionsize
- number between 0 and 100, specify the sliding panel size in percentage of the page sizeisOpen
- boolean, open or close the sliding panel
This component uses CSSTransition under the hood, so you can also specify the following props:
panelContainerClassName
- an optional additional classname for the panel containerpanelClassName
- an optional additional classname for the panel contentnoBackdrop
- an optional boolean to set to true if you don't want a backdrop panelonOpen
- Similar to onEnteronOpening
- Similar to onEnteringonOpened
- Similar to onEnteredonClose
- Similar to onExitonClosing
- Similar to onExitingonClosed
- Similar to onExitedbackdropClicked
- Callback called when the backdrop is clicked