React Bottom Sheet BooungI

!preview-gif

A simple, easy-to-use React library for creating modal-like bottom sheets. (react 18 supported)

$3

``bash
npm install react-bottom-sheet-booungi
`

$3

First, wrap your app with the BottomSheetProvider:


`tsx
// App.tsx
import React from 'react';
import { BottomSheetProvider } from 'react-bottom-sheet-booungi';

const App = () => {
return (

{/ Your app content /}

);
};

export default App;
`

Create a custom bottom sheet component:


`tsx
// MyBottomSheet.tsx
import React from 'react';

interface MyBottomSheetProps {
onClose: () => void;
}

const MyBottomSheet = ({ onClose }: MyBottomSheetProps) => {
return (


export default MyBottomSheet;
`

Use the useBottomSheet hook to show and hide your custom bottom sheet:

`tsx
// BottomSheetButton.tsx
import React from 'react';
import { useBottomSheet } from 'react-bottom-sheet-booungi';
import MyBottomSheet from './MyBottomSheet';

const BottomSheetButton = () => {
const { showBottomSheet, hideBottomSheet } = useBottomSheet();

const handleClick = () => {
// Show the bottom sheet with an optional overlay
showBottomSheet({ content: , overlay: true });
};

return Show Bottom Sheet;
};

export default BottomSheetButton;
`

$3

$3

The BottomSheetProvider component should be used to wrap your app or the part of your app where you want to use bottom sheets. It provides the context for the bottom sheet management.

$3

The useBottomSheet hook provides two functions, showBottomSheet and hideBottomSheet, to control the display of bottom sheets.
showBottomSheet(component: BottomSheetType, overlay?: boolean)

$3

- options.component: (required) The bottom sheet component to display.
- options.overlay` (optional): A boolean value that indicates whether an overlay should be displayed behind the bottom sheet. Default is false.

$3

Hides the currently displayed bottom sheet.

$3

MIT