Getting started

Install the package and import the stylesheet. The shadows are classes, and the fade edge is one function.

Install

npm install @reuse-sh/shadows

Add a shadow

Import the stylesheet once and put a level on any element. The ring variant replaces a border, so drop the one you had.

import "@reuse-sh/shadows/styles.css";
import { shadowLevels } from "@reuse-sh/shadows";

// shadowLevels is ["xs", "sm", "md", "lg", "xl", "2xl"]
const level = shadowLevels[3];
popover.classList.add(`reuse-shadow-ring-${level}`);
button.classList.add("reuse-shadow-xs");

import "@reuse-sh/shadows/styles.css";

export function Panel({ level = "md", ring = true, children }) {
  const name = ring ? `reuse-shadow-ring-${level}` : `reuse-shadow-${level}`;
  return <div className={`panel ${name}`}>{children}</div>;
}

Fade a scrolling edge

createFadeEdge masks the sides of a horizontal scroller. Destroy it with the scroller, and it puts the old inline style back.

import { createFadeEdge } from "@reuse-sh/shadows";

const strip = document.querySelector(".prints");
const fade = createFadeEdge(strip, { size: 64, curve: "smooth", mode: "scroll" });

// Change it later, or remove it with the strip.
fade.update({ mode: "fixed" });
fade.destroy();

import { createFadeEdge } from "@reuse-sh/shadows";
import { useEffect, useRef } from "react";

export function Prints({ prints, mode = "scroll" }) {
  const ref = useRef(null);
  useEffect(() => {
    const fade = createFadeEdge(ref.current, { size: 64, mode });
    return () => fade.destroy();
  }, [mode]);
  return <div ref={ref} className="prints">{prints.map(renderPrint)}</div>;
}