7.3.0 • Published 2 years ago

react-sliding-pane v7.3.0

Weekly downloads
6,016
License
MIT
Repository
github
Last release
2 years ago

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.

npm version downloads per week bundle size

Thanks BrowserStack for support!

Table of contents

Example

Try example

When to use (UX)

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.

How to use

Install module and peer dependencies:

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

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 (
    <div>
      <button onClick={() => setState({ isPaneOpen: true })}>
        Click me to open right pane!
      </button>
      <div style={{ marginTop: "32px" }}>
        <button onClick={() => setState({ isPaneOpenLeft: true })}>
          Click me to open left pane with 20% width!
        </button>
      </div>
      <SlidingPane
        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 });
        }}
      >
        <div>And I am pane content. BTW, what rocks?</div>
        <br />
        <img src="img.png" />
      </SlidingPane>
      <SlidingPane
        closeIcon={<div>Some div containing custom close icon.</div>}
        isOpen={state.isPaneOpenLeft}
        title="Hey, it is optional pane title.  I can be React component too."
        from="left"
        width="200px"
        onRequestClose={() => setState({ isPaneOpenLeft: false })}
      >
        <div>And I am pane content on left.</div>
      </SlidingPane>
    </div>
  );
};

render(<App />, document.getElementById("app"));

Properties

PropRequiredDefaultDescription
isOpenIs pane open
titleTitle in header
subtitleSubtitle in header
from"right"Direction from pane will appear
childrenContent of pane
classNameCSS class name. See react-modal
overlayClassNameCSS class name of overlay. See react-modal
widthCSS string for width pane.
closeIconCustom close icon
shouldCloseOnEscEnable pane close on ESC
hideHeaderHide pane header
onRequestCloseCalled on close icon press
onAfterOpenCalled after open

How to develop

npm run docs
open docs/example.html

How to release

npm 
7.3.0

2 years ago

7.2.0

2 years ago

7.1.0

2 years ago

7.0.0

3 years ago

6.1.2

4 years ago

6.1.1

4 years ago

6.1.0

4 years ago

6.0.1

4 years ago

6.0.0

4 years ago

5.0.0

4 years ago

4.1.0

4 years ago

4.0.1

4 years ago

4.0.0

4 years ago

3.1.0

5 years ago

3.0.1

6 years ago

3.0.0

6 years ago

2.1.1

6 years ago

2.1.0

6 years ago

2.0.2

6 years ago

2.0.1

7 years ago

2.0.0

7 years ago

1.2.4

7 years ago

1.2.3

7 years ago

1.2.2

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.0

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago