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:

`js 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 (


      
        
      

              type={'left'}
        isOpen={openPanel}
        size={30}
      >
        
          My Panel Content


  );
};

export default App;`

- Example with typescript - Example with nextJS

`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