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

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.

Check out the live demo here.

npm install react-stateful-bottom-sheet

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;

The StatefulBottomSheet component accepts the following props:

React Clickable Post Wrapper is released under the MIT License.