Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-colorscales

Package Overview
Dependencies
Maintainers
23
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-colorscales

A React component for picking colorscales based on Chroma.js

  • 0.7.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
808
decreased by-8.49%
Maintainers
23
Weekly downloads
 
Created
Source

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:

propDescription
onClickFunction to be called when colorscale is clicked.
colorscaleColorscale as an array of color strings (HEX or RGB). See Quick Start above.
widthOptional: Width of an individual color swatch. Defaults to 20px.
maxWidthOptional: Maximum width of colorscale palette. If set, maxWidth overrides swatch width.
labelOptional: Label positioned on the left side of color scale palette

ColorscalePicker component

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

propDescription
onChangePasses back a new color scale when a scale is chosen or modified.
colorscaleDefault colorscale as an array of color strings (HEX or RGB). See Quick Start above.
nSwatchesOptional: Number of discrete colors or "swatches" in the default color scale.
fixSwatchesOptional: If set to true, hides the swatches slider and fixes swatches to `nSwatches.
colorscaleTypeOptional: If set, sets ColorPicker Dropdown to specific colorscale, one of COLORSCALE_TYPES
widthOptional: Can set width of component
classNameOptional: Can add className to base level component
disableSwatchControlsOptional: Does not show swatch related controls in ColorPicker
scaleLengthOptional: 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.

FAQs

Package last updated on 16 Jan 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc