react-alwan

A simple, lightweight, customizable, touch friendly color picker for react library.

   

   

Features

• Touch friendly.
• Support dark theme.
• Alpha channel (opacity).
• Support 3 color formats hsl, rgb and hex.
• Keyboard accessible.
• Simple easy to use interface (inspired by google chrome's color picker).
• No dependencies.
• Copy color to the clipboard.
• Lightweight.

Demo

Click here to try it

Getting started

Install using package manager

1npm install react-alwan

or

yarn add react-alwan

Direct Link

• Jsdelivr CDN

1<!-- Style -->
2<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/react-alwan/dist/alwan.css" />
3
4<!-- Script -->
5<script src="https://cdn.jsdelivr.net/npm/react-alwan/dist/umd/react-alwan.js"></script>

• Unpkg CDN

1<!-- Style -->
2<link rel="stylesheet" href="https://unpkg.com/react-alwan/dist/alwan.css" />
3
4<!-- Script -->
5<script src="https://unpkg.com/react-alwan/dist/umd/react-alwan.js"></script>

Usage

1// Import javascript.
2import Alwan from 'react-alwan';
3// Import css.
4import 'react-alwan/dist/alwan.css';
5
6function App() {
7    return (
8        <>
9            <Alwan />
10        </>
11    );
12}

Props

• id (default '') — Set the color picker Id.

• classname (default '') — Add classes to the reference button.

• theme (default light) — Choose a theme, 'dark' or 'light'.

• toggle (default true) — Toggle picker's visibility (Show/Hide), Setting this to false keeps the picker visible.

• popover (default true) — Display the picker container as a pop-up (a box that floats on top of the page content), if it's false, picker container will be displayed as a block (embedded in the page's content).

• position (default bottom-start) — Set the position of the popper (if popover is set to true) relative to the reference element, the position has two values separated by a dash (-), the first value is the direction (top, bottom, right, left), the second value is the alignment (start, center, end), omitting this value will default to center.

  e.g. 'bottom-start': 'bottom' places the picker below the reference element, and 'start' aligns the left side of the container with the left side of the reference element.

  Note: If the picker container has no space to be placed, it will auto-position itself. based on the available space.

• margin (default 0) — Set the gap (in pixels) between the picker container and the reference element.

• preview (default true) — Preview the color.

• copy (default true) — Add/Remove a copy button.

• opacity (default true) — Support alpha channel and display opacity slider.

• disabled (default false) — Disable the picker, users won't be able to pick colors.

• value (default #000) — Color picker value.

• singleInput (default false) — For the formats 'hsl' and 'rgb', choose a single input to display the color string, or if false, display an input for each color component.

• inputs (default true) — Input(s) field(s) for each color format. if this option is set to true then all formats are selected.

• format (default rgb) — Initial color format.

• swatches (default []) — Array of color swatches, invalid values will be displayed as rgb(0, 0, 0).

• toggleSwatches (default false) — Make swatches container collapsible.

• closeOnScroll (default false) — Close the color picker when scrolling.

• onChange (default undefined) — On Change event fires whenever the color changes.

• onOpen (default undefined) — On Open event fires whenever the color picker opens.

• onClose (default undefined) — On Change event fired whenever the color picker closes.

Accessibility (v1.1)

Unlabeled interactive elements has a ARIA label attribute with a default values in english. You can change these labels in the options by modifying the i18n object prop.

1  i18n: {
2    palette: 'Color picker', // Label for the color picking area.
3    copy: 'Copy color to clipboard', // Label & title for the copy button.
4    changeFormat: 'Change color format', // Label & title for the change format button.
5    swatch: 'Color swatch', // Label for swatch buttons.
6    toggleSwatches: 'Toggle swatches', // Label & title for the toggle swatches button.
7    hue: 'Change hue', // Label for the hue slider.
8    alpha: 'Change opacity' // Label for the opacity slider.
9}

Events

1    <Alwan
2        onOpen={(ev) => { /* ... */ }}
3        onClose={(ev) => { /* ... */ }}
4        onChange={(ev) => {
5            ev.type // Event type `change`, `open` or `close`.
6
7            // HSL color components.
8            ev.h // Hue.
9            ev.s // Saturation.
10            ev.l // Lightness.
11
12            // RGB color components.
13            ev.r // Red.
14            ev.g // Green.
15            ev.b // Blue.
16
17            ev.a // Alpha (opacity)
18
19            // Color string values.
20            ev.hex // Hex value.
21            ev.rgb // RGB string.
22            ev.hsl // HSL string.
23        }}
24    >
25