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;

• 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