Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/florianrappl/react-carousel-hook-example
Example for creating a carousel component based on the useCarousel hook.
https://github.com/florianrappl/react-carousel-hook-example
article carousel-component react react-hooks sample
Last synced: 14 days ago
JSON representation
Example for creating a carousel component based on the useCarousel hook.
- Host: GitHub
- URL: https://github.com/florianrappl/react-carousel-hook-example
- Owner: FlorianRappl
- License: mit
- Created: 2019-12-08T09:10:30.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-03-09T06:51:33.000Z (over 4 years ago)
- Last Synced: 2024-10-03T12:52:19.822Z (about 1 month ago)
- Topics: article, carousel-component, react, react-hooks, sample
- Language: TypeScript
- Homepage: https://blog.logrocket.com/building-carousel-component-react-hooks/
- Size: 92.8 KB
- Stars: 27
- Watchers: 4
- Forks: 18
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-carousel-hook-example
This is a sample implementation using the `useCarousel` hook as described in my [article at LogRocket](https://blog.logrocket.com/building-carousel-component-react-hooks/).
## Building
If you have Node with NPM installed you can just install the local dependencies after cloning:
```sh
npm install
```
then you can run the local dev server using:
```sh
npm start
```
This will start the dev server at [localhost:1234](http://localhost:1234).
## Structure
The 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.
The `app.tsx` hosts the application. It creates an instance of teh `DemoCarousel` component just rotating three placeholder images.
## License
This sample code is released using the MIT license. For more information see the [LICENSE file](./LICENSE).