react-sliding-pane

React Sliding Pane

Pane that slides out of the window side. Like panes from Google Tag Manager.

Features:

- Animated open-close
- Smooth animation based on CSS translate
- Outside click or left top arrow click to close
- Efficient: pane content is not rendered when pane is closed
- Based on react-modal
- Close on escape support
- Typescript support
- Runtime props validation in dev via "prop-types"
- React Strict mode covered
- Small — 8 Kb gzip (react-sliding-pane + react-modal as dependency)

See changelog.


Thanks BrowserStack for support!

$3

- Example
- When to use (UX)
- How to use
- Properties
- How to develop

$3

Try example

$3

I've found sliding pane very helpful in situations when normal modal window (or just popup) is not enough: long list with pagination, multi-step form or nested popups.

$3

Install module and peer dependencies:

npm i --save react react-dom react-sliding-pane

``js
import React, { Component, useState } from "react";
import { render } from "react-dom";
import SlidingPane from "react-sliding-pane";
import "react-sliding-pane/dist/react-sliding-pane.css";

const App = () => {
const [state, setState] = useState({
isPaneOpen: false,
isPaneOpenLeft: false,
});

return (


setState({ isPaneOpen: true })}>
Click me to open right pane!

setState({ isPaneOpenLeft: true })}>
Click me to open left pane with 20% width!

className="some-custom-class"
overlayClassName="some-custom-overlay-class"
isOpen={state.isPaneOpen}
title="Hey, it is optional pane title. I can be React component too."
subtitle="Optional subtitle."
onRequestClose={() => {
// triggered on "<" on left top click or on outside click
setState({ isPaneOpen: false });
}}
>

And I am pane content. BTW, what rocks?

closeIcon={

Some div containing custom close icon.

}
isOpen={state.isPaneOpenLeft}
title="Hey, it is optional pane title. I can be React component too."
from="left"
width="200px"
onRequestClose={() => setState({ isPaneOpenLeft: false })}
>

And I am pane content on left.

render(, document.getElementById("app"));
`

$3

| Prop | Required | Default | Description |
| ---------------- | :------: | ------: | -----------------------------------------: |
| isOpen | ✅ | | Is pane open |
| title | | | Title in header |
| subtitle | | | Subtitle in header |
| from | | "right" | Direction from pane will appear |
| children | | | Content of pane |
| className | | | CSS class name. See react-modal |
| overlayClassName | | | CSS class name of overlay. See react-modal |
| width | | | CSS string for width pane. |
| closeIcon | | | Custom close icon |
| shouldCloseOnEsc | | | Enable pane close on ESC |
| hideHeader | | | Hide pane header |
| onRequestClose | ✅ | | Called on close icon press |
| onAfterOpen | | | Called after open |

$3

`
npm run docs
open docs/example.html
`

$3