zero-dependency-bottom-sheet

v2.0.4TypeScript

A zero-dependency, customizable React bottom sheet component with drag gestures, snap points, and TypeScript support

react bottom-sheet modal drawer typescript drag-gesture snap-points zero-dependency

0/weekUpdated 1 years agoMITUnpacked: 237.3 KB

Published by Ahmad Ghorbani

npm install zero-dependency-bottom-sheet

Repository Homepage npm

Zero Dependency Bottom Sheet

A lightweight, customizable React bottom sheet component with zero dependencies.

Installation

``bash npm install zero-dependency-bottom-sheet`

OR

`bash yarn add zero-dependency-bottom-sheet`

`Features`

🚫 Zero dependencies

📱 Responsive design

🎯 Snap points for precise positioning

🎨 Highly customizable styling

🔄 Smooth animations

📲 Touch-friendly drag gestures

`Usage`

`jsx import React, { useState } from "react"; import "./App.css"; import { BottomSheet } from "zero-dependency-bottom-sheet";

const App: React.FC = () => { const [isSheetVisible, setIsSheetVisible] = useState(false);

const showSheet = () => { setIsSheetVisible(true); };

const hideSheet = () => { setIsSheetVisible(false); };

return (


      
              isOpen={isSheetVisible}
        onClose={hideSheet}
        initialHeight={50}
        borderRadius={20}
        backdropOpacity={0.5}
        dragAreaColor={"#000000"}
        dragIconColor={"red"}
        closeOnOverlayClick={true}
        snapPoints={[25, 60]}
        backgroundColor="red"
      >
        
                      style={{
              display: "flex",
              justifyContent: "center",
              background: "blue",
            }}
          >
            This is the Header


        
        
          
            Bottom Sheet Modal

                          style={{ color: "black", background: "GrayText" }}
              onClick={hideSheet}
              data-testid="close-button"
            >
              Close the sheet
            
            
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores,
              quisquam rem laborum adipisci voluptate deleniti officiis alias
              minima perspiciatis, nostrum quibusdam! Doloribus nam obcaecati
              blanditiis ducimus quasi optio aliquid aspernatur.


  );
};

export default App;`

`Props`

License

MIT © Ahmad Ghorbani

Usage

jsx
import React, { useState } from "react";
import "./App.css";
import { BottomSheet } from "zero-dependency-bottom-sheet";

const App: React.FC = () => {
  const [isSheetVisible, setIsSheetVisible] = useState(false);

  const showSheet = () => {
    setIsSheetVisible(true);
  };

  const hideSheet = () => {
    setIsSheetVisible(false);
  };

  return (


      
              isOpen={isSheetVisible}
        onClose={hideSheet}
        initialHeight={50}
        borderRadius={20}
        backdropOpacity={0.5}
        dragAreaColor={"#000000"}
        dragIconColor={"red"}
        closeOnOverlayClick={true}
        snapPoints={[25, 60]}
        backgroundColor="red"
      >
        
                      style={{
              display: "flex",
              justifyContent: "center",
              background: "blue",
            }}
          >
            This is the Header

Bottom Sheet Modal

style={{ color: "black", background: "GrayText" }}
onClick={hideSheet}
data-testid="close-button"
>
Close the sheet

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores,
quisquam rem laborum adipisci voluptate deleniti officiis alias
minima perspiciatis, nostrum quibusdam! Doloribus nam obcaecati
blanditiis ducimus quasi optio aliquid aspernatur.

Props

| Prop                | Type              | Default     | Description                                                                                 | Required/Optional |
| :------------------ | :---------------- | :---------- | :------------------------------------------------------------------------------------------ | :---------------- |
| isOpen              |

boolean

         | required    | Controls the visibility of the bottom sheet                                                 | Required          |
| onClose             |

() => void

      | required    | Callback function when bottom sheet is closed                                               | Required          |
| children            |

React.ReactNode

 | required    | Content to be rendered inside the bottom sheet                                              | Required          |
| initialHeight       |

number | 50

        | Initial height of the bottom sheet in percentage (values greater than 85 will be set to 85) | Optional          |
| backdropColor       |

string | '#000000'

 | Color of the backdrop overlay                                                               | Optional          |
| backdropOpacity     |

number | 0.5

       | Opacity of the backdrop overlay (0-1)                                                       | Optional          |
| borderRadius        |

number | 20

        | Border radius of the bottom sheet in pixels                                                 | Optional          |
| dragAreaColor       |

string | '#000000'

 | Color of the drag handle area                                                               | Optional          |
| dragIconColor       |

string | '#ffffff'

 | Color of the drag handle                                                                    | Optional          |
| closeOnOverlayClick |

boolean | true

      | Close the bottom sheet when overlay is clicked                                              | Optional          |
| snapPoints          |

number[] | undefined

 | Define snapping positions during dragging (values greater than 85 will be set to 85)        | Optional          |
| backgroundColor     |

string | '#ffffff'` | Background color of the content part of the bottom sheet | Optional |