{"id":15654512,"url":"https://github.com/florianrappl/react-carousel-hook-example","last_synced_at":"2025-05-01T02:40:05.816Z","repository":{"id":147576555,"uuid":"226641260","full_name":"FlorianRappl/react-carousel-hook-example","owner":"FlorianRappl","description":"Example for creating a carousel component based on the useCarousel hook.","archived":false,"fork":false,"pushed_at":"2020-03-09T06:51:33.000Z","size":95,"stargazers_count":27,"open_issues_count":0,"forks_count":17,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T21:03:10.169Z","etag":null,"topics":["article","carousel-component","react","react-hooks","sample"],"latest_commit_sha":null,"homepage":"https://blog.logrocket.com/building-carousel-component-react-hooks/","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/FlorianRappl.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":"2019-12-08T09:10:30.000Z","updated_at":"2024-04-24T11:47:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"f10c4740-6e57-475a-b120-5ad8fdf8d2e2","html_url":"https://github.com/FlorianRappl/react-carousel-hook-example","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/FlorianRappl%2Freact-carousel-hook-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianRappl%2Freact-carousel-hook-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianRappl%2Freact-carousel-hook-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianRappl%2Freact-carousel-hook-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FlorianRappl","download_url":"https://codeload.github.com/FlorianRappl/react-carousel-hook-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251813974,"owners_count":21648192,"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":["article","carousel-component","react","react-hooks","sample"],"created_at":"2024-10-03T12:52:10.627Z","updated_at":"2025-05-01T02:40:05.772Z","avatar_url":"https://github.com/FlorianRappl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-carousel-hook-example\n\nThis is a sample implementation using the `useCarousel` hook as described in my [article at LogRocket](https://blog.logrocket.com/building-carousel-component-react-hooks/).\n\n## Building\n\nIf you have Node with NPM installed you can just install the local dependencies after cloning:\n\n```sh\nnpm install\n```\n\nthen you can run the local dev server using:\n\n```sh\nnpm start\n```\n\nThis will start the dev server at [localhost:1234](http://localhost:1234).\n\n## Structure\n\nThe source code is contained in the `src` folder. `useCarousel.ts` has the code mentioned in the article, while `DemoCarousel` has a carousel component using this hook. This sample uses [emotion](https://github.com/emotion-js/emotion) for styling - so all the CSS is inlined.\n\nThe `app.tsx` hosts the application. It creates an instance of teh `DemoCarousel` component just rotating three placeholder images.\n\n## License\n\nThis sample code is released using the MIT license. For more information see the [LICENSE file](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorianrappl%2Freact-carousel-hook-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflorianrappl%2Freact-carousel-hook-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorianrappl%2Freact-carousel-hook-example/lists"}