A React UI component for picking and modifying colorscales
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit d47213d Jan 29, 2018
Permalink
Failed to load latest commit information.
build
config
public
scripts
src
.gitignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json
yarn.lock

README.md

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 with a default colorscale

<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.

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.