{"id":25858551,"url":"https://github.com/cuvar/swiper-action","last_synced_at":"2026-06-09T12:31:11.196Z","repository":{"id":139419959,"uuid":"607589721","full_name":"cuvar/swiper-action","owner":"cuvar","description":"simple component for swipe-to-action","archived":false,"fork":false,"pushed_at":"2023-11-14T18:30:07.000Z","size":422,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-27T10:51:33.908Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/cuvar.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-28T09:28:34.000Z","updated_at":"2023-03-09T13:49:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"fe2a8ede-90d0-4264-a8b4-220bd63b27ef","html_url":"https://github.com/cuvar/swiper-action","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cuvar/swiper-action","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuvar%2Fswiper-action","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuvar%2Fswiper-action/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuvar%2Fswiper-action/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuvar%2Fswiper-action/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cuvar","download_url":"https://codeload.github.com/cuvar/swiper-action/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuvar%2Fswiper-action/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34107865,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-03-01T20:21:11.309Z","updated_at":"2026-06-09T12:31:11.191Z","avatar_url":"https://github.com/cuvar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# swiper-action\nSimple react component for swipe-to-action.\n\n## ⚠️ Disclaimer\nThis project is still in its early stages. If you have ideas for improvements, open an issue or a pull request!\n\n## Idea\nUsing this library \"swipe-to-action\" can be implemented easily. The idea is to have a container that contains the content and the actions. The actions are hidden by default and are only shown when the user swipes the content to the left or right. The actions can then be clicked to perform an action.\n\n## 🚀 Getting started\nYou can install this package using your favorite package manager:\n\n```npm install swiper-action```\n\nThere are two components: \n- `SwiperAction`: acts as the outer container for your content.\n- `Action`: used for the definition of your \"swipe-to-actions\" actions. The handler for each action receives an `InteractionEvent` that can either be a `MouseEvent` or a `TouchEvent`.\n\n\n```jsx\nimport { SwiperAction, Action } from \"swiper-action\";\n\nfunction Example() {\n  const actions = [\n    \u003cAction action={(e) =\u003e handleClick(e)} key={1}\u003e\n      \u003cdiv className=\"flex h-full flex-col justify-center\"\u003e\n        action\n      \u003c/div\u003e\n    \u003c/Action\u003e,\n    \u003cAction action={(e) =\u003e handleClick(e)} key={2}\u003e\n      \u003cdiv className=\"flex h-full flex-col justify-center\"\u003e\n        action2\n      \u003c/div\u003e\n    \u003c/Action\u003e,\n  ];\n\n  return (\n    \u003cSwiperAction actions={actions}\u003e\n      \u003cdiv\u003eContent\u003c/div\u003e\n    \u003c/SwiperAction\u003e\n  );\n}\n```\n\nIn the end, this should look something like this image:\n![alt text](res/example.png)\n\n### Caveats\n1. Currently, the `key` prop needs to be set manually for the `Action` component. This will likely be fixed in the future.\n2. The width and height of the outer container for the `SwiperAction` component need to be set explicitly.\n\n## ⚙️ Contributing\n\nPull requests are welcome. For major changes, please open an issue first\nto discuss what you would like to change.\n\n## License\n\nThis project is licensed under the [MIT](./LICENSE) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuvar%2Fswiper-action","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcuvar%2Fswiper-action","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuvar%2Fswiper-action/lists"}