react-framer-bottom-sheet

Installation

npm install react-framer-bottom-sheet

or

yarn add react-framer-bottom-sheet

Usage

import FramerBottomSheet from 'react-framer-bottom-sheet';
import { FramerBottomSheetRef } from 'react-framer-bottom-sheet/dist/sheetType';

function App() {
  const sheetRef = useRef < FramerBottomSheetRef > null;

  const buttonHandler = () => {
    sheetRef.current?.snapTo('bottom');
  };

  return (
    <div className="App">
      <button onClick={buttonHandler}>to bottom</button>
      <FramerBottomSheet
        initialPosition="top"
        ref={sheetRef}
        style={{ backgroundColor: '#FAFAFA' }}
        snapPoint={{ top: { height: 400 }, bottom: { height: 100 } }}
        bottomScrollLock
        headerElement={
          <div style={{ height: 50, backgroundColor: 'red' }}>header</div>
        }
        footerElement={
          <div style={{ height: 50, backgroundColor: 'green' }}>footer</div>
        }
      >
        <div style={{ height: 500, backgroundColor: 'blue' }}>Content</div>
      </FramerBottomSheet>
    </div>
  );
}

export default App;