Swatches

Overview

The Swatches component is a specialized tool designed to display and select color variants for products on your e-commerce website. It provides a visually engaging way for customers to explore different color options, directly impacting their purchasing decisions.

Usage

// importing component
import { Swatches } from "@unbxd-ui/react-search-components";
 
// import the style for the component
import "@unbxd-ui/react-search-components/styles/swatches.css";

If the styles import does not work, use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/swatches.css")

Live Demo

// code used for above example
import { Swatches } from "@unbxd-ui/react-search-components";
 
<Swatches list={[ "red", "green", "white", "black", "yellow" ]} />

Props

• An array of strings where each string is used as the background colour of the respective swatch.

• The function that is invoked when a swatch button is clicked.

• The label for the Swatches component.

• This prop will be used to style the component.
• The value must use a defined structure (the structure can be seen in the following example).
• The keys in the structure must be the same while the values can changed as per the user's choice.

styles={{
	wrapper: "swatch-container", // used for the swatch wrapper
    swatch: "swatch", // used for each swatch button
    activeSwatch: "active" // used for the active swatch button
}}

Related Components

Products