devsgnr-carousel

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 a friend of mine.

Prototype Fast

It’s not for everyone especially if you want a little animation. This package is meant to serve as a quick prototype. The snippet below shows switching of the pictures in the carousel after a duration determined by the user, the default value is 3000ms.

  ...
  /**
   * @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]);
  ...

Safety First

Every part of the UI was written in Typescript React, because you can never be 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.

Open live site