simple-rc-slidepanel

Accessible and simple slide panel component for React.JS

Table of Contents

• Instalition
• Demo
• Usage
• Props
• Code example

Instalition

$ npm install simple-rc-slidepanel

Demo

You can find demo here.

Usage

<Slidepanel
    setWrapperRef = { this.setWrapperRef }
    closePanel = { this.closePanel }
    isPanelOpen = { isPanelOpen }
    left
    width = { "35%" }
    height = { "100%" }
    bgColor = { "#FFFAF0" }
>
    <h3>Children element</h3>
</Slidepanel>

Props

Name	Type	Description
left	-	panel position
right	-	panel position
top	-	panel position
bottom	-	panel position
width	string	panel width
height	string	panel height
bgColor	string	panel background color

Code example

import React, { Component } from 'react';
import Slidepanel from 'simple-rc-slidepanel';
 
export class App extends Component {
  constructor(props) {
      super(props);
 
      this.state = {
          isPanelOpen: false
      };
 
      this.openPanel = this.openPanel.bind(this);
      this.closePanel = this.closePanel.bind(this);
      this.setWrapperRef = this.setWrapperRef.bind(this);
      this.handleClickOutside = this.handleClickOutside.bind(this);
  }
 
  componentDidMount() {
      document.addEventListener('click', this.handleClickOutside, true);
  }
 
  componentWillUnmount() {
      document.removeEventListener('click', this.handleClickOutside, true);
  }
 
  setWrapperRef(node) {
      this.wrapperRef = node;
  }
 
  handleClickOutside(event) {
      if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
          this.closePanel();
      }
  }
 
  openPanel() {
      this.setState({ isPanelOpen: true });
  }
 
  closePanel() {
      this.setState({ isPanelOpen: false });
  }
 
  render() {
      const { isPanelOpen } = this.state;
 
      return (
          <div className="app">
              <div>
                  <button onClick = { this.openPanel }>Open left Slidepanel</button>
              </div>
              <Slidepanel
                  setWrapperRef = { this.setWrapperRef }
                  closePanel = { this.closePanel }
                  isPanelOpen = { isPanelOpen }
                  left
                  width = { "35%" }
                  height = { "100%" }
                  bgColor = { "#FFFAF0" }
              >
                  <h3>Children element</h3>
              </Slidepanel>
          </div>
      );
  }
}