{"id":17910769,"url":"https://github.com/thebuilder/react-use-snap-slider","last_synced_at":"2025-04-03T06:40:40.045Z","repository":{"id":154718050,"uuid":"632412923","full_name":"thebuilder/react-use-snap-slider","owner":"thebuilder","description":"Yet another carousel? Maybe. But one that tries to cut away the fluff.","archived":false,"fork":false,"pushed_at":"2023-04-26T20:21:37.000Z","size":92,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-09T20:17:12.558Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-use-snap-slider.vercel.app","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/thebuilder.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-04-25T11:03:28.000Z","updated_at":"2024-01-12T20:45:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"dd3b11af-679e-4a37-a95e-803ac065c8ae","html_url":"https://github.com/thebuilder/react-use-snap-slider","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/thebuilder%2Freact-use-snap-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebuilder%2Freact-use-snap-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebuilder%2Freact-use-snap-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebuilder%2Freact-use-snap-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thebuilder","download_url":"https://codeload.github.com/thebuilder/react-use-snap-slider/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246952267,"owners_count":20859809,"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":[],"created_at":"2024-10-28T19:34:28.686Z","updated_at":"2025-04-03T06:40:40.022Z","avatar_url":"https://github.com/thebuilder.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-use-snap-slider\n\nThis is simple React hook for creating a CSS Scroll Snap slider.\nIt allows you to create basic sliders with a few lines of code, and gives you full control over the styling.\n\n- Native scrolling and snapping\n- Supports SSR, since all the layout is done in CSS - No JS layout calculations\n- Uses [React IntersectionObserver](https://github.com/thebuilder/react-intersection-observer) to detect when slides are visible\n- MutationObserver to detect when slides are added or removed\n\nIt's still early. There are likely to be bugs and missing features.\n\n## Installation\n\n```sh\nnpm install react-use-snap-slider\n```\n\n## Usage\n\n### `useSnapSlider` hook\n\nThe `useSnapSlider` hook handles the logic for a CSS Scroll Snap slider.\n\n```tsx\nimport { useSnapSlider } from \"react-snap-slider\";\n\nfunction App() {\n  const { ref, next, previous, activeIndex, totalSlides } = useSnapSlider({\n    threshold: 0,\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\n        ref={ref}\n        className=\"flex snap-x snap-mandatory overflow-x-scroll scrollbar-hide\"\n      \u003e\n        \u003cdiv className=\"flex-none basis-full snap-start\"\u003eSlide 1\u003c/div\u003e\n        \u003cdiv className=\"flex-none basis-full snap-start\"\u003eSlide 2\u003c/div\u003e\n        \u003cdiv className=\"flex-none basis-full snap-start\"\u003eSlide 3\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cp\u003e\n        Slide {activeIndex + 1} / {totalSlides}\n      \u003c/p\u003e\n      \u003cbutton onClick={previous}\u003ePrevious\u003c/button\u003e\n      \u003cbutton onClick={next}\u003eNext\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## API\n\n### Options\n\nProvide these values as the options argument in the `useSnapSlider` hook:\n\n| Name          | Type      | Default | Description                                                                                                             |\n| ------------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------- |\n| **selector**  | `string`  |         | A CSS selector to use to find the slides inside the root element. If not defined, all children will be used             |\n| **threshold** | `number`  | `0`     | Number between `0` and `1` indicating the percentage of a slide that should be visible, before it's considered visible. |\n| **disabled**  | `boolean` | `false` | Disable the snap slider logic                                                                                           |\n| **loop**      | `boolean` | `true`  | Loop the slides with the `next` and `previous` functions.                                                               |\n\n### Return values\n\nThe `useSnapSlider` hook returns an object with the following values:\n\n| Name            | Type                      | Description                                                                                                 |\n| --------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------- |\n| **ref**         | `Ref`                     | The `ref` function to pass to the slider container. This is the element that can scroll to show the slides. |\n| **activeIndex** | `number`                  | The `index` of the first visible slide.                                                                     |\n| **totalSlides** | `number`                  | The total number of slides that's been registered. This will be `0` until the `ref` is set.                 |\n| **next**        | `() =\u003e void`              | A function to scroll to the next slide.                                                                     |\n| **previous**    | `() =\u003e void`              | A function to scroll to the previous slide.                                                                 |\n| **scrollTo**    | `(index: number) =\u003e void` | A function to scroll to a specific slide.                                                                   |\n\n## Styling\n\nThe `useSnapSlider` hook handles the logic for a snap slider, giving you full control over the styling.\n\n### Tailwind CSS\n\nExample of a snap slider with three slides, styled with [Tailwind CSS](https://tailwindcss.com/).\n\nThe important parts are:\n\n- `snap-x snap-mandatory overflow-x-scroll` on the container. This enables the native scrolling and snapping.\n- `snap-start` on each slide. This makes the slides snap to the start of the container.\n- `flex-none basis-full` on each slide. This makes the slides take up the full width of the container.\n\n```html\n\u003cdiv class=\"flex snap-x snap-mandatory overflow-x-scroll\"\u003e\n  \u003cdiv class=\"flex-none basis-full snap-start\"\u003eSlide 1\u003c/div\u003e\n  \u003cdiv class=\"flex-none basis-full snap-start\"\u003eSlide 2\u003c/div\u003e\n  \u003cdiv class=\"flex-none basis-full snap-start\"\u003eSlide 3\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Hiding the scrollbar\n\nYou can use the following CSS to hide the scrollbar on the snap slider.\n\n```css\n@layer components {\n  .scrollbar-hide {\n    scrollbar-width: none;\n  }\n  .scrollbar-hide::-webkit-scrollbar {\n    display: none;\n  }\n}\n```\n\nApply it to the snap slider container.\n\n```html\n\u003cdiv class=\"snap-x snap-mandatory overflow-x-scroll scrollbar-hide\"\u003e...\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthebuilder%2Freact-use-snap-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthebuilder%2Freact-use-snap-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthebuilder%2Freact-use-snap-slider/lists"}