Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chcepe/react-simple-bottom-sheet
A simple bottom sheet component for your React apps - best for PWAs. Built with framer-motion.
https://github.com/chcepe/react-simple-bottom-sheet
bottom-sheet bottomsheet pwa react react-bottom-sheet react-pwa
Last synced: about 2 months ago
JSON representation
A simple bottom sheet component for your React apps - best for PWAs. Built with framer-motion.
- Host: GitHub
- URL: https://github.com/chcepe/react-simple-bottom-sheet
- Owner: chcepe
- License: mit
- Created: 2021-03-17T16:01:15.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-03-17T17:56:59.000Z (almost 4 years ago)
- Last Synced: 2024-11-16T12:49:14.465Z (3 months ago)
- Topics: bottom-sheet, bottomsheet, pwa, react, react-bottom-sheet, react-pwa
- Language: TypeScript
- Homepage: https://chcepe.github.io/react-simple-bottom-sheet/
- Size: 561 KB
- Stars: 12
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Simple Bottom Sheet 🎉
A simple bottom sheet component for your React apps - **best for PWAs** 🔥
[](https://www.youtube.com/watch?v=RGLwYiSEKAc)
## Installation 🚀
This library is built with [framer-motion](https://github.com/framer/motion) and [styled-components](https://styled-components.com/) therefore you have to install first these two dependencies on your project.
`npm install framer-motion styled-components` or `yarn add framer-motion styled-components`
then
`npm install react-simple-bottom-sheet` or `yarn add react-simple-bottom-sheet`
## Sample Usage 💻
import React from "react";
import { bottomSheet } from "react-simple-bottom-sheet";
export default function App() {
const handleOpen = () => bottomSheet.create({
content: (
Hello world!
),
});
return Open
}
You can check `example/src` folder to know more!
## API 👋
- `bottomSheet.create(createConfig)`
- `bottomSheet.close(closeConfig)`
- `bottomSheet.isOpen(id)`
The properties of config are as follows:
#### create({...})
| Property | Description | Type | Default |
| ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------ | -------------------- |
| id | Unique identifier of the bottom sheet | string | `"default"` |
| content | Main content of bottom sheet (required) | ReactNode | - |
| header | Header content of bottom sheet | ReactNode | - |
| footer | Footer content of bottom sheet | ReactNode | - |
| dragHandle | Draggable elements of bottom sheet | `['content' \| 'header \| 'footer' \| 'mask']` | `['header', 'mask']` |
| onClose | function | Trigger when bottom sheet is closed | - |
| onOpen | function | Trigger when bottom sheet is opened | - |
| darkMode | boolean | Changes the appearance of bottom sheet to dark mode | false |
| maskClosable | boolean | Whether to close the modal dialog when the mask (area outside the bottom sheet) is clicked | true |
| debug | boolean | Enables debug mode to show the draggable areas | false |
#### close({...})
| Property | Description | Type | Default |
| -------- | --------------------------------------------------------------------------- | -------- | ----------- |
| id | Unique identifier of the bottom sheet that needs to be closed | string | `"default"` |
| callback | Specifies the function that will be called after the bottom sheet is closed | function | - |
#### isOpen(id)
| Property | Description | Type | Default |
| -------- | ---------------------------------------------------------------------------- | ------ | ----------- |
| id | Unique identifier of the bottom sheet that needs to be checked if it's open. | string | `"default"` |
## Note 🗒
Putting clickable elements such as Buttons, Inputs, etc. on draggable areas is not possible as of the moment - still working on it.
## Donation 🙏
If this project help you reduce time to develop, you can give me a cup of ☕️ or ☕️ :)
[
](https://www.paypal.com/paypalme/chcepe)
## License 🙌
> Copyright (c) 2021 chcepe.github.io
>
> Permission is hereby granted, free of charge, to any person obtaining
> a copy of this software and associated documentation files (the
> "Software"), to deal in the Software without restriction, including
> without limitation the rights to use, copy, modify, merge, publish,
> distribute, sublicense, and/or sell copies of the Software, and to
> permit persons to whom the Software is furnished to do so, subject to
> the following conditions:
>
> The above copyright notice and this permission notice shall be
> included in all copies or substantial portions of the Software.