React Stateful Bottom Sheet

Screen.Recording.2023-07-04.at.18.22.44.mov

React Stateful Bottom Sheet is a versatile npm package that provides a stateful bottom sheet component for your React applications. It fits easily into your project, enhancing user interaction and responsiveness.

hackernoon arcticle about creation that component https://hackernoon.com/building-a-stateful-bottom-sheet-component-in-react

Features

1. Flexible and customizable: Adapt the bottom sheet component to match your project's design and functionality requirements with ease.
2. Draggable and resizable: Users can interactively drag the bottom sheet up and down, with the component automatically resizing its height in response.
3. State management: Built-in state management allows for toggling the bottom sheet open or closed, offering a smooth user experience.
4. Smooth animations: Leverages the framer-motion library for fluid animations and transitions.
5. TypeScript support: TypeScript integration enhances type safety and the overall developer experience.

With these features, React Stateful Bottom Sheet serves as a comprehensive solution for implementing bottom sheets in your React applications, facilitating the creation of dynamic, engaging user interfaces.

Demo

Check out the live demo here.

Installation

npm install react-stateful-bottom-sheet

Usage

Here is an example of how you can use the React Stateful Bottom Sheet component::

import React from "react";
import { BottomSheet } from "react-stateful-bottom-sheet";

const MyComponent = () => {
  return (
    <BottomSheet>
      {({ isOpen, setOpen }) => {
          if (isOpen)
            return (
              <div>
                <div>Open state example</div>
                <button onClick={() => setOpen(false)}>
                  Test setOpen function
                </button>
              </div>
            );
          return (
            <div>Closed state example</div>
          );
        }}
    </BottomSheet>
  );
};

export default MyComponent;

Props

The StatefulBottomSheet component accepts the following props:

Prop Name	Type	Description
children	ReactNode or ((props: BottomSheetChildProps) => ReactNode)	React node(s) to be rendered inside the bottom sheet. If this prop is a function, it will receive an object with isOpen and setOpen properties.
rootClassName	string (optional)	A CSS class name for the bottom sheet container.
wrapperClassName	string (optional)	A CSS class name for the wrapper element inside the bottom sheet container.
lineClassName	string (optional)	A CSS class name for the line element inside the bottom sheet.
contentClassName	string (optional)	A CSS class name for the content area inside the bottom sheet.
compactHeight	string (optional)	The height of the bottom sheet when it is in its compact state. Default is "auto".
fullHeight	string (optional)	The height of the bottom sheet when it is in its full state. Default is "90vh".
onClickOutside	() => void (optional)	A callback function that is invoked when a click is detected outside the bottom sheet.
closeOnClickOutside	boolean (optional)	Indicates whether the bottom sheet should close when a click is detected outside of it. Default is true.

License

React Clickable Post Wrapper is released under the MIT License.