devsgnr-carousel

🎉 A Simple Carousel built using React, Typescript and styled-components

A simple image carousel, just pass an array of URLs and you’re good to go.

45 lines of logic

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.

Download now