Awesome

React colorscales 🌈

A React UI component for picking and modifying colorscales, based on Chroma-js.

Part of Plotly's React Component Suite for building data visualization Web apps and products.

Demo

👉 DEMO

👉 Demo source code

👉 Wrapper for Dash apps (Python)

Install

npm install react-colorscales

yarn add react-colorscales

🚗 Quick Start

import {Colorscale} from 'react-colorscales';
import ColorscalePicker from 'react-colorscales';

const viridisColorscale = ['#fafa6e', '#9cdf7c', '#4abd8c', '#00968e', '#106e7c', '#2a4858'];

// Show a single colorscale

<Colorscale
    colorscale={viridisColorscale}
    onClick={() => {}}
    width={150}
/>

// Show the colorscale picker

<ColorscalePicker 
    onChange={this.onChange}
    colorscale={viridisColorscale}
/>

API

Colorscale component

<Colorscale /> generates a single color scale palette:

`prop`	Description
`onClick`	Function to be called when colorscale is clicked.
`colorscale`	Colorscale as an array of color strings (HEX or RGB). See Quick Start above.
`width`	Optional: Width of an individual color swatch. Defaults to 20px.
`maxWidth`	Optional: Maximum width of colorscale palette. If set, `maxWidth` overrides swatch `width`.
`label`	Optional: Label positioned on the left side of color scale palette

ColorscalePicker component

<ColorscalePicker /> generates a UI panel for selecting a color scale palette:

`prop`	Description
`onChange`	Passes back a new color scale when a scale is chosen or modified.
`colorscale`	Default colorscale as an array of color strings (HEX or RGB). See Quick Start above.
`nSwatches`	Optional: Number of discrete colors or "swatches" in the default color scale.
`fixSwatches`	Optional: If set to `true`, hides the swatches slider and fixes swatches to `nSwatches.
`colorscaleType`	Optional: If set, sets ColorPicker Dropdown to specific colorscale, one of `COLORSCALE_TYPES`
`width`	Optional: Can set width of component
`className`	Optional: Can add className to base level component
`disableSwatchControls`	Optional: Does not show swatch related controls in ColorPicker
`scaleLength`	Optional: Can specify the lengh of the Colorscales used in the ColorPicker

See the demo app source code for an example of importing and using these components.

Features

Preloaded with ColorBrewer, cmocean, and cube helix color scales
Log color scales
Set custom scale breakpoints
Set the number of discrete colors ("swatches") in a color scale

Screenshots

react-colorscales-screenshot

Credit

Cynthia Brewer's ColorBrewer colorscales
Kristen Thyng's cmocean color scales
Dave Green's cube helix color scales
Gregor Aisch's chroma-js for easy access to the aforementioned color scales in JavaScript.