react-bottom-sheet is implementation of bottom sheet for reactJS platform. Now supports ONLY mobile browser including Safari on IOS.

Installation

npm i @rakhimgaliyev/react-bottom-sheet

or

yarn add @rakhimgaliyev/react-bottom-sheet

Getting started

Basic usage

import { useState } from "react"
import { BottomSheetDialog } from "@rakhimgaliyev/react-bottom-sheet"

export default function Example() {
  const [open, setOpen] = useState(true)
  return (
    <>
      <button onClick={() => setOpen(true)}>
        open
      </button>
      
      <BottomSheetDialog
        open={open}
        setOpen={setOpen}
      >
        <div style={{height: 300}}>
          content here
        </div>
      </BottomSheetDialog>
    </>
  )
}

API

props

open

Type: boolean

The required prop

setOpen

Type: () => void

header

Type: ReactNode

footer

Type: ReactNode