react-sliding-panel

Simple React component for sliding panel on mobile.

Install

npm install react-sliding-panel --save

Demo

Example

import React, { useState } from 'react';
import SlidingPanel from 'react-sliding-panel';
 
const DemoComponent = React.memo((props) => {
  const [isOpen, setIsOpen] = useState(false);
  const [type, setType] = useState('bottom');
  return (
    <>
      <div>React Sliding Panel Demo</div>
      <div>
        <button className="btn btn-primary" onClick={() => {setType('bottom'); setIsOpen(true);}}>Bottom</button>
      </div>
      <div>
        <button className="btn btn-primary" onClick={() => {setType('side'); setIsOpen(true);}}>left</button>
      </div>
      <SlidingPanel
        type={type}
        isOpen={isOpen}
        closeFunc={() => setIsOpen(false)}
      >
        <div>
          Your components here
        </div>
      </SlidingPanel>
    </>
  );
});
 

Documentation - props

Always required

type: string

• bottom
• side

Set sliding panel type.

isOpen: boolean

Save sliding panel state

closeFunc: function

Set sliding panel close function

Changelog

• 0.0.3

License

MIT License