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