2.0.3 • Published 3 years ago
react-sliding-side-panel v2.0.3
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';
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 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
2.0.3
3 years ago
2.0.2
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.1.8
4 years ago
1.1.7
4 years ago
1.1.6
4 years ago
1.1.5
4 years ago
1.1.4
4 years ago
1.1.3
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.15
4 years ago
1.0.14
4 years ago
1.0.13
4 years ago
1.0.12
4 years ago
1.0.11
4 years ago
1.0.10
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago