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:
import React, { useState } from 'react';
import SlidingPanel from 'react-sliding-side-panel';
import 'react-sliding-side-panel/lib/index.css';
const App = () => {
const [openPanel, setOpenPanel] = useState(false);
return (
<div>
<div>
<button onClick={() => setOpenPanel(true)}>Open</button>
</div>
<SlidingPanel
type={'left'}
isOpen={openPanel}
size={30}
>
<div>
<div>My Panel Content</div>
<button onClick={() => setOpenPanel(false)}>close</button>
</div>
</SlidingPanel>
</div>
);
};
export default App;
Props
Common props you may want to specify include:
-
type
- left | right | top | bottom, specify the sliding panel position -
size
- number between 0 and 100, specify the sliding panel size in percentage of the page size -
isOpen
- 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 container -
panelClassName
- an optional additional classname for the panel content -
noBackdrop
- an optional boolean to set to true if you don't want a backdrop panel -
onOpen
- Similar to onEnter -
onOpening
- Similar to onEntering -
onOpened
- Similar to onEntered -
onClose
- Similar to onExit -
onClosing
- Similar to onExiting -
onClosed
- Similar to onExited -
backdropClicked
- Callback called when the backdrop is clicked