{"id":13670775,"url":"https://github.com/bmcmahen/react-gesture-stack","last_synced_at":"2025-04-14T05:10:09.210Z","repository":{"id":35055601,"uuid":"195504569","full_name":"bmcmahen/react-gesture-stack","owner":"bmcmahen","description":"an animated stack view for the web similar to that found in iOS","archived":false,"fork":false,"pushed_at":"2023-01-26T15:22:08.000Z","size":9073,"stargazers_count":60,"open_issues_count":29,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T05:09:41.818Z","etag":null,"topics":["gesture","react","react-spring","stack"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/embed/damp-monad-ukvcu","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/bmcmahen.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}},"created_at":"2019-07-06T06:11:18.000Z","updated_at":"2024-11-04T23:00:27.000Z","dependencies_parsed_at":"2023-02-14T18:46:27.490Z","dependency_job_id":null,"html_url":"https://github.com/bmcmahen/react-gesture-stack","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Freact-gesture-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Freact-gesture-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Freact-gesture-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Freact-gesture-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bmcmahen","download_url":"https://codeload.github.com/bmcmahen/react-gesture-stack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248824681,"owners_count":21167345,"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":["gesture","react","react-spring","stack"],"created_at":"2024-08-02T09:00:49.363Z","updated_at":"2025-04-14T05:10:09.167Z","avatar_url":"https://github.com/bmcmahen.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"\u003cdiv align=\"center\"\u003e\n \u003cimg \n    max-width=\"300px\"\n    alt=\"A demo showing views being swiped left and right.\"\n     src=\"https://raw.githubusercontent.com/bmcmahen/react-gesture-stack/master/demo.gif\"\u003e\n\u003c/div\u003e\n\n# react-gesture-stack\n\n[![npm package](https://img.shields.io/npm/v/react-gesture-stack/latest.svg)](https://www.npmjs.com/package/react-gesture-stack)\n[![Follow on Twitter](https://img.shields.io/twitter/follow/benmcmahen.svg?style=social\u0026logo=twitter)](https://twitter.com/intent/follow?screen_name=benmcmahen)\n\nReact-gesture-stack provides an iOS stack-like interface for use on the web. It supports gestures to \"go back\" in the stack. View the above example [on CodeSandbox](https://codesandbox.io/embed/damp-monad-ukvcu).\n\nThis was originally built for use in [Sancho-UI](https://github.com/bmcmahen/sancho).\n\n## Install\n\nInstall `react-gesture-stack` and its peer dependency `react-gesture-responder` using yarn or npm.\n\n```\nyarn add react-gesture-stack react-gesture-responder\n```\n\n## Basic usage\n\n```jsx\nimport { Stack, StackItem, StackTitle } from \"react-gesture-stack\";\n// optional styles\nimport \"react-gesture-stack/src/styles.css\";\n\nfunction Simple() {\n  const [index, setIndex] = React.useState(0);\n\n  return (\n    \u003cStack\n      onIndexChange={i =\u003e setIndex(i)}\n      index={index}\n      style={{ width: \"400px\", height: \"600px\" }}\n      items={[\n        {\n          title: \u003cStackTitle title=\"First title\" /\u003e,\n          content: (\n            \u003cStackItem\u003e\n              \u003cbutton onClick={() =\u003e setIndex(index + 1)}\u003eView 2\u003c/button\u003e\n            \u003c/StackItem\u003e\n          )\n        },\n        {\n          title: \u003cStackTitle title=\"Second title\" /\u003e,\n          content: (\n            \u003cStackItem\u003e\n              \u003cbutton onClick={() =\u003e setIndex(index + 1)}\u003eView 3\u003c/button\u003e\n            \u003c/StackItem\u003e\n          )\n        },\n        {\n          title: \u003cStackTitle title=\"Third title\" /\u003e,\n          content: (\n            \u003cStackItem\u003e\n              \u003cdiv\u003eNo more!\u003c/div\u003e\n            \u003c/StackItem\u003e\n          )\n        }\n      ]}\n    /\u003e\n  );\n}\n```\n\n## API\n\n### Stack\n\n| Name             | Type                 | Default Value | Description                                             |\n| ---------------- | -------------------- | ------------- | ------------------------------------------------------- |\n| index \\*         | number               |               | The index of stack item to show                         |\n| onIndexChange \\* | (i: number) =\u003e void; |               | A callback requesting the active stack item change      |\n| items \\*         | StackItemList[]      |               | A list of stack items to render (see the above example) |\n| disableNav       | boolean              | false          | Hide the top navigation pane                            |\n| navHeight        | number               | 50            | The height of the navigation pane (in px)                      |\n\n### StackItem\n\n| Name     | Type       | Default Value | Description               |\n| -------- | ---------- | ------------- | ------------------------- |\n| style    | object     |               | Optional style attributes |\n| children | React.Node |               | Content of the stack item |\n\n### StackTitle\n\n| Name          | Type       | Default Value | Description                                                                  |\n| ------------- | ---------- | ------------- | ---------------------------------------------------------------------------- |\n| title         | React.Node |               | The title of the stack item                                                  |\n| backTitle     | string     | \"Back\"        | The title of the back button                                                 |\n| contentAfter  | React.Node |               | Content that appears to the right of the title                               |\n| contentBefore | React.Node |               | Content that appears to the left of the title (and replaces the back button) |\n| backButton | React.Node | | Render a custom back button. You're responsible for listening to click handlers and updating the current index|\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmcmahen%2Freact-gesture-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbmcmahen%2Freact-gesture-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmcmahen%2Freact-gesture-stack/lists"}