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>
    </>
  );
});