color

A full color palette manager for React

Jan 18, 2021
A full color palette manager for React

React-Color-List

A color list manager for React.

React-Color-List

View Demo View Github

Installation

React-Color-List is available as an npm package.

// with npm npm install react-color-list

Usage

import React, { useState } from "react" import ColorList from "react-color-list" function App() { const [colors, setColors] = useState(["#bf4040","#ab3f3f","#9f3737","#8d3434","#812929"]) return <ColorList colors={colors} colorFormat="hex" onChange={(c) => setColors(c)} /> }

Props

HelloTypeRequired?DefaultDescription
colorsarray of colorsrequirednoneColors displayed by list
onChangefunctionrequirednoneNew list of colors and event that triggered change
colorFormat"hex"| "rgb" |"hsl"optional"hex"Format of colors in colors array
defaultColorstring color in same format as those in colors arrayoptionalWhiteThe default color for new colors added
disableAlphabooloptionalfalseWhether alpha slider should be visible
maxColorspositive integeroptionalInfinityMax number of colors that can be added to list
minColorspositive integeroptional0Min number of colors that can be in the color list
onMaxColorsReachedfunctionoptionalnoneFunction that is called when user has attempted to add more than max number of colors
onMinColorsReachedfunctionoptionalnoneFunction that is called when user has attempted to remove more than min number of colors
shouldAnimatebooloptionaltrueIf the color swatches should animate in
animationLengthdoubleoptional0.1Seconds for each swatch to animate in
animationOffsetdoubleoptional0.05Seconds between start of each swatch animation
loadFromLeftbooloptionalfalseIf new colors should be added to left side (at index 0)
flipAddButtonbooloptionalfalseIf add color button should be flipped to left side
popoverPropsobjectoptionalnoneProps supplied to MUI Popover
containerPropsobjectoptionalnoneProps supplied to list container,
classNamestringoptionalnoneClass name supplied to list container
swatchLabelPropsobjectoptionalnoneProps supplied to swatch label
removeButtonPropsobjectoptionalnoneProps supplied to MUI Button for removing
saveButtonPropsobjectoptionalnoneProps supplied to MUI Button for saving
saveButtonPropsobjectoptionalnoneProps supplied to MUI IconButton for adding
swatchLabelColorfunctionoptionalblack/white inverseColor of swatch label in any format (hex, rgb, etc)
swatchActiveBorderColorfunctionoptionalinverseColor of swatch border when swatch is active in any format (hex, rgb, etc)
AddButtonElementoptionalnoneButton replacement for adding color that takes prop addColor function
RemoveButtonElementoptionalnoneButton replacement for removing colors that takes prop removeColor function
SaveButtonElementoptionalnoneButton replacement for saving colors that takes prop saveColor function

Examples

import React, { useState } from "react" import ColorList from "react-color-list" function App() { const [colors, setColors] = useState(["rgba(191,64,64,.5)","rgba(171,63,63,.6)","rgb(159,55,55)","rgb(141,52,52)","rgb(129,41,41)"]) return <ColorList colors = {colors} colorFormat = "rgb" onChange = {(c)=>setColors(c)} loadFromLeft flipAddButton maxColors = {10} minColors = {2} defaultColor="rgb(255,255,0)"/> }
import React, { useState } from "react" import ColorList from "react-color-list" function App() { const [colors, setColors] = useState(["#bf4040","#ab3f3f","#9f3737","#8d3434","#812929"]) return <ColorList colors={colors} colorFormat="hex" disableAlpha maxColors={6} onMaxColorsReached={(num) = alert("Reached Max of " + num)} className="container" onChange={(c, e) => { setColors(c) alert(e) }} AddButton={ ({ addColor }) => { return <button onClick={() => addColor()}>Fancy Add Button</button> }} /> }

GitHub

Recommended