{"id":15297083,"url":"https://github.com/mohit23x/actionsheet-react","last_synced_at":"2025-06-10T10:08:37.427Z","repository":{"id":38981771,"uuid":"265614900","full_name":"mohit23x/actionsheet-react","owner":"mohit23x","description":"React action sheet component","archived":false,"fork":false,"pushed_at":"2023-03-01T23:57:42.000Z","size":1201,"stargazers_count":12,"open_issues_count":6,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T03:11:28.933Z","etag":null,"topics":["actionsheet","hacktoberfest","react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/actionsheet-react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mohit23x.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-20T15:54:35.000Z","updated_at":"2024-06-27T06:01:05.000Z","dependencies_parsed_at":"2024-06-18T21:21:26.408Z","dependency_job_id":"327d3100-59d1-4fa5-80bd-865ca5c12fd2","html_url":"https://github.com/mohit23x/actionsheet-react","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/mohit23x%2Factionsheet-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohit23x%2Factionsheet-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohit23x%2Factionsheet-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohit23x%2Factionsheet-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohit23x","download_url":"https://codeload.github.com/mohit23x/actionsheet-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohit23x%2Factionsheet-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":258874953,"owners_count":22771240,"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":["actionsheet","hacktoberfest","react"],"created_at":"2024-09-30T19:15:02.714Z","updated_at":"2025-06-10T10:08:37.398Z","avatar_url":"https://github.com/mohit23x.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ActionSheet-React\r\n\r\n[![Size](https://badgen.net/bundlephobia/minzip/actionsheet-react)](https://bundlephobia.com/result?p=actionsheet-react)\r\n[![npm](https://badgen.net//npm/v/actionsheet-react)](https://www.npmjs.com/package/actionsheet-react)\r\n\r\nAn action sheet component for react.\r\n\r\n#### What is an action sheet ?\r\n\r\nAction Sheet is a component that slides in from bottom and has some list of action for the user. Mostly action sheets are used in native mobile application, but action sheet is a very helpful UI element which can be also be used in websites and PWA.\r\n\r\n### 📺 Demo\r\n\r\n![demo gif](https://s7.gifyu.com/images/demo_action_sheet.gif)\r\n\r\n[code-sandbox simple example](https://codesandbox.io/s/actionsheet-react-2s5zf)\r\n\r\n[code-sandbox complex example](https://codesandbox.io/s/actionsheet-react-example-1-0nok0)\r\n\r\n### 📦 Installation\r\n\r\n##### using npm\r\n\r\n```bash\r\nnpm i actionsheet-react\r\n```\r\n\r\n##### using yarn\r\n\r\n```bash\r\nyarn add actionsheet-react\r\n```\r\n\r\n### 👨‍💻 Usage\r\n\r\n##### Sample code using Javascript\r\n\r\n```javascript\r\nimport React, { useRef, Fragment } from \"react\";\r\nimport ActionSheet from \"actionsheet-react\";\r\n\r\nconst MyComponent = () =\u003e {\r\n  const ref = useRef();\r\n\r\n  const handleOpen = () =\u003e {\r\n    ref.current.open();\r\n  };\r\n\r\n  const handleClose = () =\u003e {\r\n    ref.current.close();\r\n  };\r\n\r\n  return (\r\n    \u003cFragment\u003e\r\n      \u003cbutton onClick={handleOpen}\u003eOpen\u003c/button\u003e\r\n      \u003cbutton onClick={handleClose}\u003eClose\u003c/button\u003e\r\n      \u003cActionSheet ref={ref}\u003e\r\n        \u003cdiv style={style.content}\u003e🙂 Hi React Devs!\u003c/div\u003e\r\n      \u003c/ActionSheet\u003e\r\n    \u003c/Fragment\u003e\r\n  );\r\n};\r\n\r\nconst style = {\r\n  content: {\r\n    height: 300,\r\n    display: \"flex\",\r\n    justifyContent: \"center\",\r\n    alignItems: \"center\",\r\n  },\r\n};\r\n```\r\n\r\n##### Sample code using Typescript\r\n\r\n```typescript\r\nimport ActionSheet, {ActionSheetRef} from 'actionsheet-react';\r\n\r\nconst MyComponent = () =\u003e {\r\n  const ref = useRef\u003cActionSheetRef\u003e();\r\n\r\n  // ...rest same as above code\r\n\r\n```\r\n\r\n### 🌮 Props\r\n\r\n##### all props are optional\r\n\r\n| property name   | type              | more info                                                                                                          |\r\n| --------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------ |\r\n| onClose         | callback function | called when the actionsheet is closed                                                                              |\r\n| children        | React Children    | all the fancy HTML elements that you want to show in the menu                                                      |\r\n| bgStyle         | css styles object | these styles are applied to the background black overlay                                                           |\r\n| sheetStyle      | css styles object | these styles are applied to the sheet component                                                                    |\r\n| mouseEnable     | boolean           | if true, the sheet can be dragged down using mouse                                                                 |\r\n| touchEnable     | boolean           | if true, the sheet can be swiped down on touch devices                                                             |\r\n| threshold       | number            | the minimum distance dragged, so that sheet will slide down. Threshold is measured in **px** , default value is 50 |\r\n| zIndex          | number            | the default value is **999**                                                                                       |\r\n| closeOnBgTap    | boolean           | if true, the sheet is closed when the background overlay is tapped                                                 |\r\n| reverse         | boolean           | open the sheet in reverse direction                                                                                |\r\n| sheetTransition | string            | css transition shorthand, default value `transform 0.3s ease-in-out`                                               |\r\n| bgTransition    | string            | css transition shorthand, default value `opacity 0.5s ease-in-out, z-index 0.5s ease-in-out`                       |\r\n\r\n### 👾 Misc\r\n\r\n1. The logic to stop the backgroud from scrolling is not implemented in this package just to keep it simple. To avoid the background from scrolling you can toggle the overflow property of the body tag, or you can also use some other way of your choice\r\n\r\n```javascript\r\ndocument.body.style.overflow = \"hidden\";\r\ndocument.body.style.overflow = \"auto\";\r\n```\r\n\r\n2. Mobile browsers generally have pull-to-refresh and when action sheet is open and when user drags the sheet down the pull-to-refresh is triggered. To control this behavior either you can disable swipe in action sheet `touchEnable={false}` or you can disable pull-to-refresh.\r\n\r\n```css\r\nbody {\r\n  overscroll-behavior: contain;\r\n}\r\n```\r\n\r\n### ⛳ Issues/Feature Request/Pull Request\r\n\r\nThe github repo is always there for you.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohit23x%2Factionsheet-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohit23x%2Factionsheet-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohit23x%2Factionsheet-react/lists"}