benedictegiraud / react-sliding-side-panel

A sliding panel for React applications

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

react-sliding-side-panel's Issues

Scrolling the panel scrolls the content behind it

Describe the bug
If the content behind the panel has a scrollbar, scrolling on the panel will actually scroll the content behind it.

Please let me know if I'm misunderstanding something and if I'm doing something wrong.

See screen recording below for how I did this on the example site.

Expected behavior
Scrolling while the panel is open should not cause anything to scroll except the panel (if the panel has scrollable content).

Screenshots

Geeting error that typings does not exist

I am trying to install the typings for the latest project but I am getting error that typings does not exist
"@types/react-sliding-side-panel": "^1.0.14",

Do you have typings for the module? If yes, can you tell me the package number, if no, can you provide that?

Context sidebar

Want use all context, exemple component and subcomponent but it does not open on smal sizer elements (lide dropdown)

Typescript version

For anyone that is interested here is a cutdown version of this written in Typescript. I didn't port the following properties though

• 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

import React from 'react';
import { CSSTransition } from 'react-transition-group';
import '../css/SlidingPanel.css';


export enum PanelType {
    Top = 1,
    Right,
    Bottom,
    Left,
}

//http://reactcommunity.org/react-transition-group/transition#Transition-prop-onEntering
type Nullable<T> = T | null;
export interface SliderProps {
    type: PanelType;
    size: number;
    panelClassName?: string;
    isOpen: boolean;
    children: Nullable<React.ReactElement>;
    backdropClicked: () => void;
}


const getPanelGlassStyle = (type: PanelType, size: number, hidden: boolean): React.CSSProperties => {
    const horizontal = type === PanelType.Bottom || type === PanelType.Top;
    return {
        width: horizontal ? `${hidden ? '0' : '100'}vw` : `${100 - size}vw`,
        height: horizontal ? `${100 - size}vh` : `${hidden ? '0' : '100'}vh`,
        ...(type === PanelType.Right && { left: 0 }),
        ...(type === PanelType.Top && { bottom: 0 }),
        position: 'inherit',
    };
};

const getPanelStyle = (type: PanelType, size: number): React.CSSProperties => {
    const horizontal = type === PanelType.Bottom || type === PanelType.Top;
    return {
        width: horizontal ? '100vw' : `${size}vw`,
        height: horizontal ? `${size}vh` : '100vh',
        ...(type === PanelType.Right && { right: 0 }),
        ...(type === PanelType.Bottom && { bottom: 0 }),
        position: 'inherit',
        overflow: 'auto',
    };
};


function getNameFromPanelTypeEnum(type: PanelType): string {

    let result = "";
    switch (type) {
        case PanelType.Right:
            result = "right";
            break;
        case PanelType.Left:
            result = "left";
            break;
        case PanelType.Top:
            result = "top";
            break;
        case PanelType.Bottom:
            result = "bottom";
            break;
    }
    return result;
}

const SlidingPanel: React.SFC<SliderProps> = (props) => {

    const glassBefore = props.type === PanelType.Right || props.type === PanelType.Bottom;
    const horizontal = props.type === PanelType.Bottom || props.type === PanelType.Top;
    return (
        <div>
            <div className={`sliding-panel-container ${props.isOpen ? 'active' : ''} 'click-through' `}>
                <div className={`sliding-panel-container ${props.isOpen ? 'active' : ''} 'click-through' `}>
                    <CSSTransition
                        in={props.isOpen}
                        timeout={500}
                        classNames={`panel-container-${getNameFromPanelTypeEnum(props.type)}`}
                        unmountOnExit
                        style={{ display: horizontal ? 'block' : 'flex' }}
                    >
                        <div>
                            {glassBefore && (
                                <div
                                    className="glass"
                                    style={getPanelGlassStyle(props.type, props.size, false)}
                                    onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => { props.backdropClicked(); }}
                                />
                            )}
                            <div className="panel" style={getPanelStyle(props.type, props.size)}>
                                <div className={`panel-content ${props.panelClassName || ''}`}>{props.children}</div>
                            </div>
                            {!glassBefore && (
                                <div
                                    className="glass"
                                    style={getPanelGlassStyle(props.type, props.size, false)}
                                    onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => { props.backdropClicked(); }}
                                />
                            )}
                        </div>
                    </CSSTransition>
                </div>
            </div>
        </div>
    );
}


SlidingPanel.defaultProps = {
    type: PanelType.Left,
    size: 50,
    panelClassName: '',
    isOpen: false,
    children: null,
    backdropClicked: () => null
}

export default SlidingPanel;			

Add custom class to panel-content div

Hello,

Super cool panel, I got what I wanted with it. would it be possible to add a prop to add custom classes to the main div with the class panel-content ?

In any case, thanks !

Whenever Android and iOS browsers have their URL visible, it hides content at bottom of panel

Describe the bug
Whenever you open up react-sliding-side-panel when the browsers URL is visible, it hides the bottom part of the panel.

Expected behavior
I would expect all of the sliding panel to be visible no matter if the browsers URL is visible or not.

Screenshots




Here's some examples from Android and iOS.

I have the panel set up as a header, body and footer. The body is scrollable, but the header and footer are fixed at the top and bottom of the screen.

Side Panel not scrolling in MAC Chrome

I've integrated the sliding panel in my website. It opens up just fine but I am unable to scroll vertically in the panel that opens up.
This issue is only coming in MAC Chrome

Add option to customize backdrop style

Is your feature request related to a problem? Please describe.
I would like to have the option to easily access the styling of the backdrop element and customize it.

Describe the solution you'd like
An easy solution might be adding a prop for that? Something like backdropClassName which would override the glass or sliding-panel-container class that is currently applied by default.

Describe alternatives you've considered
Haven't tried that yet but I guess I could make a css file with an override for the glass class, I just think that it is nicer and makes more sense to allow that customization built into the package.

Thank you very much for your time :)

does not work with nextjs.

the way this library uses css, is not supported by nextjs,

it's probably better to have the user auto import the library css manually ...

Non blocking backdrop

Is your feature request related to a problem? Please describe.
Yes, I'm trying to use it along with a map, and I need to move the map while the sidebar is opened.

Describe the solution you'd like
An open sidebar with a transparent or non-existent backdrop.

Describe alternatives you've considered
Some props option to define if the backdrop should exist/block or not.

Additional context
No additional info, should just be configurable because it works well for 80% of the cases, but that specific scenario is a big need.

Warning on deprecated findDomNode caused by react-transition-group

Describe the bug
A disturbing warning in the console which tells the usage of deprecated findDomNode in Strict mode for newer versions of React.

To Reproduce
React 16.8 or greater with strict mode enabled. Whenever the Sliding pane is opened.

Expected behavior
No warnings

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Ubuntu 21.10
• Browser chrome
• Version 96

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.