Simple React Bottom Sheet

Simple React Bottom Sheet is a React package that allows you to display content in a bottom sheet easily.

Installation

You can install this package using npm:

npm install simple-react-bottom-sheet

or using yarn:

yarn add simple-react-bottom-sheet

How to use

import React, { useState } from 'react';
import BottomSheet from 'simple-react-bottom-sheet';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const handleDismiss = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Bottom Sheet</button>
      <BottomSheet isOpen={isOpen} onDismiss={handleDismiss} height={300}>
        {/* Your content here */}
        <p>This is the bottom sheet content</p>
      </BottomSheet>
    </div>
  );
}

export default App;

Props

This package requires the following props:

Mandatory props:

isOpen, type: boolean

Determines whether the bottom sheet is displayed or not.

onDismiss, type: () => void

Function to be called when the bottom sheet is dismissed.

Optional props:

height, type: number

Specifies the height of the bottom sheet. If not specified, the height will adjust to the content.