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';
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;
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