{"id":13773352,"url":"https://github.com/eyalzh/react-headless-gallery","last_synced_at":"2025-09-06T02:32:44.445Z","repository":{"id":198685275,"uuid":"701315311","full_name":"eyalzh/react-headless-gallery","owner":"eyalzh","description":"React headless gallery / carousel component","archived":false,"fork":false,"pushed_at":"2024-04-08T17:59:31.000Z","size":94,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-31T11:37:32.439Z","etag":null,"topics":["carousel","headless","react"],"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/eyalzh.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-10-06T11:37:44.000Z","updated_at":"2025-04-24T08:23:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"9febaed4-0932-4d9a-8e13-4b3697adff8c","html_url":"https://github.com/eyalzh/react-headless-gallery","commit_stats":null,"previous_names":["eyalzh/react-headless-gallery"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eyalzh/react-headless-gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eyalzh%2Freact-headless-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eyalzh%2Freact-headless-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eyalzh%2Freact-headless-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eyalzh%2Freact-headless-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eyalzh","download_url":"https://codeload.github.com/eyalzh/react-headless-gallery/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eyalzh%2Freact-headless-gallery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273440278,"owners_count":25106143,"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","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"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":["carousel","headless","react"],"created_at":"2024-08-03T17:01:14.690Z","updated_at":"2025-09-06T02:32:44.140Z","avatar_url":"https://github.com/eyalzh.png","language":"TypeScript","funding_links":[],"categories":["Libraries"],"sub_categories":[],"readme":"# React Headless Gallery\n\nHeadless, zero-dependencies, gallery/carousel component.\n\n## Features\n\n- Infinite sliding (circular gallery)\n- Sliding animation (configurable)\n- Self looping (configurable)\n- Gallery indicators\n- Allows for lazy loading of gallery items (see example below)\n- Freely style and position all elements of the component\n- Built with accessibility in mind (see accessibility below)\n\n## Install\n\n```bash\nnpm install react-headless-gallery\n```\n\n```bash\nyarn add react-headless-gallery\n```\n\n## Example\n\n[Click here for a live demo](https://headless-demo2.s3.us-east-2.amazonaws.com/index.html)\n\n\u003cimg src=\"https://s3.eu-west-1.amazonaws.com/simple.kanban/gallery1.jpg\" width=\"400\" alt=\"Gallery demo\" /\u003e\n\n\n## Code Example\n\nThe following code example uses TailwindCSS to style the gallery, as shown in the image above:\n\n```jsx\nfunction MyGallery() {\n  const items = [\n    {\n      id: 1,\n      content: (\n        \u003cimg alt=\"Item 1\" src=\"...\" /\u003e\n      ),\n    },\n    {\n      id: 2,\n      content: (\n        \u003cimg alt=\"Item 2\" loading=\"lazy\" src=\"...\" /\u003e\n      ),\n    },\n    {\n      id: 3,\n      content: (\n        \u003cimg alt=\"Item 3\" loading=\"lazy\" src=\"...\" /\u003e\n      ),\n    },\n  ] as const;\n\n  return (\n    \u003cdiv className=\"w-full h-full bg-white p-32\"\u003e\n      \u003cGallery className=\"flex flex-col items-center gap-4\"\u003e\n        \u003cdiv className=\"flex flex-row gap-2 items-center\"\u003e\n          \u003cGallery.Prev className=\"cursor-pointer text-gray-800\"\u003e\n            \u003cLeftSVG /\u003e\n          \u003c/Gallery.Prev\u003e\n          \u003cGallery.Items className=\"w-[640px]\"\u003e\n            {items.map((item) =\u003e (\n              \u003cGallery.Item key={item.id}\u003e\n                {item.content}\n              \u003c/Gallery.Item\u003e\n            ))}\n          \u003c/Gallery.Items\u003e\n          \u003cGallery.Next className=\"cursor-pointer text-gray-800\"\u003e\n            \u003cRightSVG /\u003e\n          \u003c/Gallery.Next\u003e\n        \u003c/div\u003e\n        \u003cdiv className=\"flex flex-row gap-2\"\u003e\n          {[...Array(items.length)].map((_, i) =\u003e (\n            \u003cGallery.Indicator\n              key={i}\n              galleryItemIndex={i}\n              className={(isCurrent) =\u003e\n                `text-sm cursor-pointer ${isCurrent ? \"text-gray-800\" : \"text-gray-300\"}`\n              }\n            \u003e\n              ⬤\n            \u003c/Gallery.Indicator\u003e\n          ))}\n        \u003c/div\u003e\n      \u003c/Gallery\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n\n## Accessibility\n\nThe gallery's controls (next, prev, and indicators) are buttons with ARIA labels that can be changed. They are defined as controlling the gallery container with the aria-controls attribute. Please note that all items in the gallery will have the aria-hidden attribute, except for the item that is currently being shown. Items in the gallery should not include focusable elements.\n\n## API\n\n### Gallery\n\n| Name | Type | Description |\n|------|------|-------------|\n| `transitionDurationMS` | `number` | The duration of the transition in milliseconds. Default: `300`. |\n| `transitionTimingFunction` | `EasingFunction` | The timing function for the transition. Default: `ease-in-out`. |\n| `selfLooping` | `false \\| number` | Enable self-looping. If a number is provided, it will be used as the looping interval in milliseconds. Default: `false` |\n| `stopLoopingOnInteraction` | `boolean` | If true, self looping will stop when the gallery is interacted with (default: `true`) |\n| `className` | `string` | Additional CSS classes to apply to the component. |\n| `style` | `React.CSSProperties` | Inline styles to apply to the component. |\n| `ref` | `React.Ref\u003cHTMLDivElement\u003e` | ref object to the HTML container element. |\n\n### Gallery.Indicator\n\n| Name | Type | Description |\n|------|------|-------------|\n| `galleryItemIndex` | `number` | The index of the item to switch to. |\n| `aria-label` | ` string \\| ((itemNumber: number, isCurrent: boolean) =\u003e string)` | ARIA label for the button. |\n| `className` | `string \\| ((isCurrent: boolean) =\u003e string)` | Additional CSS classes to apply to the component. |\n| `style` | `React.CSSProperties` | Inline styles to apply to the button. |\n| `ref` | `React.Ref\u003cHTMLButtonElement\u003e` | ref object to the HTML button element. |\n\n## Gallery.Prev and Gallery.Next\n\n| Name | Type | Description |\n|------|------|-------------|\n| `aria-label` | ` string` | ARIA label for the button. |\n| `className` | `string` | Additional CSS classes to apply to the component. |\n| `style` | `React.CSSProperties` | Inline styles to apply to the button. |\n| `ref` | `React.Ref\u003cHTMLButtonElement\u003e` | ref object to the HTML button element. |\n\n\n## Note on infinite sliding\n\nTo implement infinite sliding, the first and last gallery elements are cloned - each will appear twice in the DOM. If that causes undesirable side effects, please create an issue.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feyalzh%2Freact-headless-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feyalzh%2Freact-headless-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feyalzh%2Freact-headless-gallery/lists"}