dimitrydushkin/sliding-pane

Pane that slides out of the window side

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!

Table of contents

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

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

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

How to develop

npm run docs
open docs/example.html

How to release

npm 

sliding-pane's Issues

How to disable overlay ?

Hi,

I'm trying to disable the content overlay, i just need tu use the panel as "menu" to edit the page content.

How can I do this ? I've tried to set the "overlayCustomClass" with "display: none" but it's hide the panel too :/

Edit: I've found an issue on react-modal if it can help : reactjs/react-modal#259

Thanks for your work :)

Cannot use import statement outside a module

If you are using server side rendering, you might run into the following

...\node_modules\react-sliding-pane\dist\react-sliding-pane.js:1
import React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module

to solve, in your babel config edit it to

require("@babel/register")({ ignore: [ // /(node_module)/ //This right here! Now it will throw babel error, but it will not crash server ],

Probably a way to solve this issue using babel to compile react-sliding-pane so that it will not throw this error when running.

background-color in custom className is overridden

when used with css modules, it seems that the custom className you offeris overrridden by your component styles.
could you please help me with that? or explain me how you designed the use of that className prop?

Close panel from within panel

Is there a way to close the sliding panel from inside the panel?

Problem keeping the content of the pane

Hello,

I'm using the sliding pane and it's working perfectly. In the pane I have checkboxes which is check to filter an image gallery. My problem is that when I close the pane and reopen it, it looses the state of all checkboxes as if it is creating it again.

Is that what is happening ?

`export default class SlidePane extends React.Component<
{
    mas: any;
},
{
    isPaneOpenLeft: boolean;
    children: any;
}
>{
    constructor(props) {
        super(props);
        this.state = {
            isPaneOpenLeft: false,
            children: (
                <form id="checkboxes">
                    <div className="checkbox"><input type="checkbox" onChange={() => this.filter(this.props.mas)} id="actualites" name="filters" value="Actualites"></input><label htmlFor="actualites">Actualités</label></div>
                    <div className="checkbox"><input type="checkbox" onChange={() => this.filter(this.props.mas)} id="recommandation" name="filters" value="Recommandation"></input><label htmlFor="recommandation">Recommandation</label></div>
                    <div className="checkbox"><input type="checkbox" onChange={() => this.filter(this.props.mas)} id="veille" name="filters" value="Veille"></input><label htmlFor="veille">Veille</label></div>
                    <div className="checkbox"><input type="checkbox" onChange={() => this.filter(this.props.mas)} id="indicateurs" name="filters" value="Indicateurs"></input><label htmlFor="indicateurs">Indicateurs</label></div>
                    <div className="checkbox"><input type="checkbox" onChange={() => this.filter(this.props.mas)} id="secumonde" name="filters" value="La securite dans le Monde"></input><label htmlFor="secumonde">La sécurité dans le monde</label></div>
                </form>
            )
        };
    }
 
    private el;

    componentDidMount() {
        Modal.setAppElement(this.el);
    }


    private filter(mas: any){
            let filters = [];
            let finalFilters;
            $('#checkboxes .checkbox input').each(function(){
                if($(this).prop('checked')){
                    filters.push($(this).attr('value'));
                }
            });
            if(filters.length <= 0 ){
                finalFilters = '*';
            }
            else{
                finalFilters = filters.join(',');
            }
            mas.layout({filter:finalFilters});
    }
 
    render() {
        return (
        <div ref={ref => this.el = ref}>
            <div id="filterContainer">
                <a className="ms-Icon ms-Icon--Filter" onClick={ () => this.setState({ isPaneOpenLeft: true }) }></a>
            </div>
            <SlidingPane
                isOpen={ this.state.isPaneOpenLeft }
                title='Filters'
                from='left'
                width='250px'
                onRequestClose={ () => this.setState({ isPaneOpenLeft: false }) }>
                {this.state.children}
            </SlidingPane>
        </div>);
    }
}`

Include the css in the bundle

First of all thank you for the library.

Usually, if you are sure that your average user won't need to override your styles, then the styles can be a part of the bundle.
For this project, the css names are tightly coupled with the implementation.
Is there a specific reason why the average user must import the css manually?

Is there a dark/night theme by default?

Is there a dark theme / style by default?

Navigating Through Tabs on Form Element in Sliding Pane Not working in Chrome

Hi,
I have used sliding pane in my code. Everything seems to work nicely except that I can't navigate through tab on Form Elements which I have kept in Sliding Pane. The problem only occurs in Chrome. In Firefox it behaves as it should.

I have also tried the same code on other computers. There is same issue with Chrome there too.

Render html code in Pane Title

i want to render html code
e.g. <span className='badge badge-danger text-center> xyz </span>
in place of simple text title how can i do that ?

Slide-in animation not working in macOS Safari, iOS Safari or iOS Chrome

The slide-in animation works fine on macOS Chrome, but the sliding animation does not work on macOS Safari, iOS Safari, or iOS Chrome.

Slide-out animation always works across all browsers, as well as the fade in/out of the overlay on both appear and disappear.

Can you add option to remove slide pane header?

I currently removed it via CSS. But it would be nice to have an option to do so.

This Screen Render issue

App element is not defined. Please use Modal.setAppElement(el) or set appElement={el}. This is needed so screen readers don't see main content when modal is opened. It is not recommended, but you can opt-out by setting ariaHideApp={false}.

Not sliding: I can open and close the slider, but there are not transitions.

Do i need to do something additional to get the animation?

Disable outside click but keep top left arrow click to close?

Is it possible to disable the outside clicking but maintain the functionality of clicking in the pane?

How to Add onScroll Event to Sliding Pane Content

Hi,
I am using the sliding pane in my project, I wanted to close the sliding pane automatically when the user reaches to the bottom of the content for that I am using onScroll Event
But it's not Working
Please Help me as soon as possible

Incorrect peer dependency (2.0.1 v)

Hello Dimitry, thanks for this useful component!
I'm using the latest version (2.0.1) of the library and I'm getting the following warnings every time I run yarn on my project:

warning " > [email protected]" has incorrect peer dependency "react@^15.0.0".
warning " > [email protected]" has incorrect peer dependency "react-dom@^15.0.0".

Maybe you have to update these dependencies.

rendering empty div

Hello @DimitryDushkin ,

I am trying to unit test my notification bar and during the test, SlidingPane is rendering an empty div. I have tried everything I could. Maybe a third eye could help me find out the issue. Please let me know if you have any suggestions for me. Thanks in advance !!

My Component

<div ref={(ref) => (this.el = ref)}>
        <SlidingPane
          className="notification"
          overlayClassName="notification__overlay"
          isOpen={this.props.showNotificationPanel}
          from="right"
          onRequestClose={() => {
            this.props.showNotification(false);
          }}>
          //some code
        </SlidingPane>

</div>

My Test

it('renders', () => {
    wrapper = mountWithIntl(<ShowNotification {...minProps} showNotificationPanel={true} />, 'en');
    console.log("wrapper", wrapper.html()); // outputs <div><!-- react-empty: 2 --></div>
    expect(
      wrapper.children().hasClass('notification')
    ).to.equal(true);
  });

conditional width

Hi ,
i have issues figuring out how to add conditional width to sliding-pane, even with className props as mentioned in docs.

I checked /react-sliding-pane/dist/react-sliding-pane.js on line 87 - 92 there are set width styles 80%
thats whats causing issue on my end :/

Visible tab head to expand panel

Hi, I love this component. The missing feature for my use case is that I'd like to have a kind of tab head with a label on which a user can click and expand the panel. The tab can be positioned on the left, the bottom or the right depending on the side the panel is sliding from and still be visible next to the expanded panel and serve as closing button too. Would be really cool such a feature.
Ok I'd love to have a from top pane too. Thanks in advance.

Stil the current panel.

Could you please add a option to let the current panel still while next panel appears into the view port? And also to apply the zIndex to the moving panel. Thank you

Custom className for actual panel

Hi there,

Love the slider and would love to use it. Is it possible for you to pass on the className prop of the SlidingPanel to the actual panel that is rendered? I need the panel to have a calculated height (I don't want it to overlap my top nav), and add some shadow styles etcetera that I all have defined as util css classes.

I think it's a relatively small change, that will make this a lot more usefull and customizable.

Flip animation instead of slide

First of all thank you for this module.

I found a issue, when I try to use it in my project I am getting a flip animation instead of slide animation, while I am not using any custom class.
I am assuming this is because of the incorrect css properties being applied to the component.

Please check if you are also facing the same issue.

Arrow should point in direction of close

First, thanks for the component. I noticed however that if you expand from the right, the arrow still points left. It should really point right to indicate which direction it will close.

Even better would be being able to customise the icon used.

Thanks

A bit confused about applying styles

To make sliding work like in the example on pressing button "Open right pane" I had to namually copy-paste this styles https://github.com/DimitryDushkin/sliding-pane/blob/master/src/react-sliding-pane.css into my project css file. Is it supposed to be like that?

React 18 not supported?

Stopped working with React 18. Maybe they implement portals differently now.
I can see the divs and classes in the inspector, but they are completely invisible.
Tested with react: <18.0.0 and it works again.

  System:
    OS: Windows 10 10.0.19044
    Memory: 12.86 GB / 31.75 GB
  Binaries:
    Node: 16.5.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.4.1 - C:\Program Files\nodejs\npm.CMD
  Managers:
    pip3: 21.2.4 - C:\Python39\Scripts\pip3.EXE
    RubyGems: 3.2.22 - C:\tools\ruby30\bin\gem.CMD
  Utilities:
    CMake: 3.22.0 - /c/Program Files/CMake/bin/cmake
    Git: 2.32.0. - /mingw64/bin/git
  Virtualization:
    Docker: 20.10.11 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE
  IDEs:
    VSCode: 1.66.1 - C:\Program Files\Microsoft VS Code\bin\code.CMD
    Visual Studio: 17.0.32014.148 (Visual Studio Community 2022)
  Languages:
    Bash: 4.4.23 - C:\Program Files\Git\usr\bin\bash.EXE
    Perl: 5.32.1 - C:\Program Files\Git\usr\bin\perl.EXE
    PHP: 7.4.21 - C:\tools\php74\php.EXE
    Python: 3.9.6 - /c/Python39/python
    Ruby: 3.0.2 - C:\tools\ruby30\bin\ruby.EXE
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.39)
    Internet Explorer: 11.0.19041.1566

React Native Version of sliding pane

I am just curious if you will make this for React Native too?

After searching and searching for a React Native sliding panel that would pop out from the right since you cannot style a Modal in react native, I found this and it's exactly what I wanted! But its for react.

If you will be making this for React Native too, please let me know!

Unable to scroll the panel in Safari

Scrolling the contents of the panel does not work in Safari.

Tested on version: 12.0.3

WebpackError: ReferenceError: window is not defined

Hey,

I'm using this with Gatsby and I just tried building my site on Netlify but I'm running into an issue where the window is not defined. Is there a workaround for this or anyway to make this SSR compatible?

Here's the error that Netlify is throwing:

WebpackError: ReferenceError: window is not defined react-sliding-pane.js:1 Object../node_modules/react-sliding-pane/dist/react-sliding-pane.js node_modules/react-sliding-pane/dist/react-sliding-pane.js:1:418

Thanks!

Release with added shouldCloseOnEsc

Hi! Thanks for your work on this library! Could you please do a release with the last commit (added shouldCloseOnEsc) and publish it on npm?

Question: Can you customize the arrow icon with something else?

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

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/react-sliding-pane
npm ERR! react-sliding-pane@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/erwinagpasa/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/erwinagpasa/.npm/_logs/2020-12-26T19_15_28_083Z-debug.log
➜ reactjs-testimonials git:(main) npm i --save react react-dom react-sliding-pane
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/react-sliding-pane
npm ERR! react-sliding-pane@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/erwinagpasa/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/erwinagpasa/.npm/_logs/2020-12-26T19_18_46_123Z-debug.log

On panel close page scroll to top

I am using sliding pane and i love it.
However i am getting one issue while using pane in list item click.

I have a long list to display on clicking of a list item Sliding pane is open, issue is when some one scroll list and on 4th item click sliding pane is open then after closing pan list scroll to 0 index.

React Modal Warning

I am getting the following warning in my console during the slide animation

Warning: react-modal: App element is not defined. Please use Modal.setAppElement(el) or set appElement={el}. This is needed so screen readers don't see main content when modal is opened. It is not recommended, but you can opt-out by setting ariaHideApp={false}.

Can you please help me resolving this. Thanks in advance! @DimitryDushkin

Request: Add a 'onOverLayClick' prop that triggers when you click the overlay

I need this because I need my drawer to show a "changes not saved modal" before closing.

Thanks

How can I fit jsx on the title?

Hi, i'm already using jsx in the title and it works. But I get a warning.
How can I remove that warning?

How to set from which point in width the sliding pane should begin

Hello, thank you for the library, it works very well.

I am having trouble trying to set the
.slide-pane_from_left.content-after-open { transform: translateX(0%); }
to a different value. Is there a way to do it? I mean, I have not found where to put the style, so I can override it.

Thanks

Typescript support

How we can disable overlay from slide?

Pane unable to slide back

I am using the below code to my main page, I can make it slide up but when I close it, it won't slide back, just disappears. Any suggestions on this? Thanks!

import React, { Component } from "react";
import SlidingPane from "react-sliding-pane";
import "react-sliding-pane/dist/react-sliding-pane.css";
import Modal from "react-modal";
import Editor from "nib-core";
class Publish extends Component {
  componentDidMount() {
    Modal.setAppElement(this.el);
  }
  render() {
    return (
      <div ref={ref => (this.el = ref)}>
        <SlidingPane
          isOpen={this.props.isPaneOpen}
          title="Share Your Wisdom and Click Post"
          from="bottom"
          width="100%"
          onRequestClose={this.props.onPaneOpen}
        >
          <Editor />
          <button onClick={this.props.onPaneOpen}>Post</button>
        </SlidingPane>
      </div>
    );
  }
}

export default Publish;

Allow passing className to the slide-pane__content

As of now, there's an option to pass some custom CSS classes to the Modal component, but I need to pass the bootstrap d-flex CSS class to the div with the CSS class slide-pane__content but I can't.

A contentClassName option should be added so that one can pass an additional class to the content div.

Nested Component Javascript not working

I have a function I am calling in componentDidMount. When I place the affected elements outside of the sliding pane component they are working fine. When I place them inside, the javascript fails to execute. Is this a bug, or something I am missing?

How do I remove the slidepane header?

How to automatically change width ?

How to automatically change width based on screen size. currently, I am using 80% but I want to change it to 100% for mobile view. For other tasks, till now I was using the @media screen, but that doesn't work here as I need to pass a string. Please provide a solution and if possible with an example. Thanks!

Not close on overlay click

Do we have any way to prevent click outside?

Add suport to SASS and SCSS

How to disable overlay from sliding pane?

Close panel with external link

Hi,

I would like to know if there is a way to close the panel when we click on a link that redirect to another page ?

Thank you

No Animation on Mobile Devices

Im using iPhone X to test and there is slide in animation while opening, but it works fine while closing it. The animation works properly in desktop (MacBook Air 2017).

Content of the pane is invisible if screen is over 2000px wide and pane width is small enough

Tested with Chrome Version 98.0.4758.109.

This can be repeated in demo page the following way (if your screen isn't wide enough):

1. Go to https://dimitrydushkin.github.io/sliding-pane/example.html
2. Open Chrome DevTools
3. Click "Toggle Device Toolbar" and set the screen width to 2000px in "Responsive" mode
4. Now click "Open left pane with 20% width and hidden header"
5. Pane looks empty!

However, if I hover my cursor on top of the pane, then content becomes visible.

Interestingly enough there's no problem if screen resolution is even 1px smaller or if pane width is big enough (not sure how wide is wide enough but the other buttons work correctly because their panes are wider).

This may be related but the proposed solutions didn't seem to work or I applied them in wrong classes:
https://stackoverflow.com/questions/15751012/css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w

Is it SlidingPane or ReactSlidingPane?

Looking at the source code the component should be ReactSlidingPane but everywhere in the documents it's SlidingPane, am I missing something?