{"id":23204705,"url":"https://github.com/chcepe/react-simple-bottom-sheet","last_synced_at":"2025-08-19T01:32:02.512Z","repository":{"id":57344620,"uuid":"348769805","full_name":"chcepe/react-simple-bottom-sheet","owner":"chcepe","description":"A simple bottom sheet component for your React apps - best for PWAs. Built with framer-motion.","archived":false,"fork":false,"pushed_at":"2021-03-17T17:56:59.000Z","size":574,"stargazers_count":12,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-16T12:49:14.465Z","etag":null,"topics":["bottom-sheet","bottomsheet","pwa","react","react-bottom-sheet","react-pwa"],"latest_commit_sha":null,"homepage":"https://chcepe.github.io/react-simple-bottom-sheet/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chcepe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-17T16:01:15.000Z","updated_at":"2024-01-02T21:27:42.000Z","dependencies_parsed_at":"2022-09-11T08:41:17.980Z","dependency_job_id":null,"html_url":"https://github.com/chcepe/react-simple-bottom-sheet","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chcepe%2Freact-simple-bottom-sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chcepe%2Freact-simple-bottom-sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chcepe%2Freact-simple-bottom-sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chcepe%2Freact-simple-bottom-sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chcepe","download_url":"https://codeload.github.com/chcepe/react-simple-bottom-sheet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230107270,"owners_count":18174228,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bottom-sheet","bottomsheet","pwa","react","react-bottom-sheet","react-pwa"],"created_at":"2024-12-18T16:19:50.706Z","updated_at":"2024-12-18T16:19:55.567Z","avatar_url":"https://github.com/chcepe.png","language":"TypeScript","funding_links":["https://www.paypal.com/paypalme/chcepe"],"categories":[],"sub_categories":[],"readme":"# React Simple Bottom Sheet 🎉\n\nA simple bottom sheet component for your React apps - **best for PWAs** 🔥\n\n[![Preview](https://user-images.githubusercontent.com/25549784/111182978-bbb67500-85af-11eb-8494-d6eda161e499.gif)](https://www.youtube.com/watch?v=RGLwYiSEKAc)\n\n## Installation 🚀\n\nThis 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.\n\n`npm install framer-motion styled-components` or `yarn add framer-motion styled-components`\n\nthen\n\n`npm install react-simple-bottom-sheet` or `yarn add react-simple-bottom-sheet`\n\n## Sample Usage 💻\n\n    import React from \"react\";\n    import { bottomSheet } from \"react-simple-bottom-sheet\";\n\n    export  default  function App() {\n        const handleOpen = () =\u003e bottomSheet.create({\n    \t    content: (\u003cp\u003eHello world!\u003c/p\u003e),\n        });\n        return \u003cbutton onClick={handleOpen}\u003eOpen\u003c/button\u003e\n    }\n\nYou can check `example/src` folder to know more!\n\n## API 👋\n\n- `bottomSheet.create(createConfig)`\n- `bottomSheet.close(closeConfig)`\n- `bottomSheet.isOpen(id)`\n\nThe properties of config are as follows:\n\n#### create({...})\n\n| Property     | Description                             | Type                                                                                       | Default              |\n| ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------ | -------------------- |\n| id           | Unique identifier of the bottom sheet   | string                                                                                     | `\"default\"`          |\n| content      | Main content of bottom sheet (required) | ReactNode                                                                                  | -                    |\n| header       | Header content of bottom sheet          | ReactNode                                                                                  | -                    |\n| footer       | Footer content of bottom sheet          | ReactNode                                                                                  | -                    |\n| dragHandle   | Draggable elements of bottom sheet      | `['content' \\| 'header \\| 'footer' \\| 'mask']`                                             | `['header', 'mask']` |\n| onClose      | function                                | Trigger when bottom sheet is closed                                                        | -                    |\n| onOpen       | function                                | Trigger when bottom sheet is opened                                                        | -                    |\n| darkMode     | boolean                                 | Changes the appearance of bottom sheet to dark mode                                        | false                |\n| maskClosable | boolean                                 | Whether to close the modal dialog when the mask (area outside the bottom sheet) is clicked | true                 |\n| debug        | boolean                                 | Enables debug mode to show the draggable areas                                             | false                |\n\n#### close({...})\n\n| Property | Description                                                                 | Type     | Default     |\n| -------- | --------------------------------------------------------------------------- | -------- | ----------- |\n| id       | Unique identifier of the bottom sheet that needs to be closed               | string   | `\"default\"` |\n| callback | Specifies the function that will be called after the bottom sheet is closed | function | -           |\n\n#### isOpen(id)\n\n| Property | Description                                                                  | Type   | Default     |\n| -------- | ---------------------------------------------------------------------------- | ------ | ----------- |\n| id       | Unique identifier of the bottom sheet that needs to be checked if it's open. | string | `\"default\"` |\n\n## Note 🗒\n\nPutting clickable elements such as Buttons, Inputs, etc. on draggable areas is not possible as of the moment - still working on it.\n\n## Donation 🙏\n\nIf this project help you reduce time to develop, you can give me a cup of ☕️ or ☕️ :)\n\n[\n![Paypal donate button](https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif)\n](https://www.paypal.com/paypalme/chcepe)\n\n## License 🙌\n\n\u003e Copyright (c) 2021 chcepe.github.io\n\u003e\n\u003e Permission is hereby granted, free of charge, to any person obtaining\n\u003e a copy of this software and associated documentation files (the\n\u003e \"Software\"), to deal in the Software without restriction, including\n\u003e without limitation the rights to use, copy, modify, merge, publish,\n\u003e distribute, sublicense, and/or sell copies of the Software, and to\n\u003e permit persons to whom the Software is furnished to do so, subject to\n\u003e the following conditions:\n\u003e\n\u003e The above copyright notice and this permission notice shall be\n\u003e included in all copies or substantial portions of the Software.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchcepe%2Freact-simple-bottom-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchcepe%2Freact-simple-bottom-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchcepe%2Freact-simple-bottom-sheet/lists"}