devsgnr-carousel
A lightweight & minimal open source React carousel, less fluff more carousel - hit 500+ downloads on npm in the first week of release. Working on v2 (React, styled-components)

A lightweight & minimal open source React carousel, less fluff more carousel - hit 500+ downloads on npm in the first week of release. Working on v2 (React, styled-components)
A simple image carousel, just pass an array of URLs and you’re good to go.
I kept it simple, with 45 lines of logic controlling the whole package, super light weight (26.1KB
) for those situation when you just want the functionality. This is a solution I built while working with one of my previous employers. It’s not for everyone especially if you want a little animation. Below is a snippet of code that switches the pictures in the carousel after a duration determined by the user, a normimal value I like to use is 3000ms
.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
/**
* @description useEffect - auto plays with `autoplay` props set true.
* @default false
*/
useEffect(() => {
/**
* @description - creates a setTimeout of the specific `timeout` props
*/
let timer: ReturnType<typeof setTimeout> = setTimeout(goForward, timeout);
!autoPlay && clearTimeout(timer);
/**
* @description - clean up function that clears the setTimeout function preventing unwanted actions within the package
*/
return () => clearTimeout(timer);
}, [autoPlay, goForward, timeout]);
...
Every part of the UI was written in Typescript React, because you can never to too safe. styled-components
and Storybook
to make verifying contribution extremely easy. The package hit +590 downloads in it’s first week of release and holds steady at 20+ downloads per week.