Category Color A

Color selector. It can be placed inside a product item as a color selector.

Preview

Code

import classNames from "classnames"; import React, { useState } from "react"; import styles from "./category-color-a.module.css"; type ColorType = { slug: string; rgb: string; title?: string; }; type Props = { className?: string; colors?: ColorType[]; initialColorSlug?: string; size?: "small" | "medium" | "large"; rounded?: "none" | "small" | "medium" | "large" | "full"; onSelectColor?: (colorSlug: string) => void; }; export default function CategoryColorA({ className, colors, initialColorSlug, size = "medium", rounded = "full", onSelectColor, }: Props) { // Active slug state const [activeSlug, setActiveSlug] = useState<string>( initialColorSlug || (colors ? colors[0]?.slug : "") ); return ( <> {colors && ( <div className={[ styles["wrapper"], styles[`s-${size}`], styles[`r-${rounded}`], className, ].join(" ")} > {colors.map((color) => { return ( <button title={color.slug} type="button" key={color.slug} className={[ styles["color-icon"], activeSlug === color.slug && styles["active"], ].join(" ")} style={{ backgroundColor: color.rgb, }} onClick={() => { setActiveSlug(color.slug); onSelectColor && onSelectColor(color.slug); }} ></button> ); })} </div> )} </> ); }

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.

  • colors (Array of ColorType): Specifies the colors to select.

  • initialColorSlug (string): Specifies the default selected color slug.

  • size ("small" | "medium" | "large"): Specifies the size of the component.

  • rounded ("none" | "small" | "medium" | "large" | "full"): Specifies the border radius of each color frame.

  • onSelectColor (function): Fires when a color is clicked.

ColorType item arguments
  • slug (string): Specifies the reference slug text.
  • title (string): Specifies the item title text.
  • rgb (string): Specifies the rgb color value.