react-color-list
v1.0.8
Published
A color list manager for React
Downloads
29
Maintainers
Readme
Demo
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
| Prop Name | Type |Required? | Default | Description|
|--|--|--|--|--|
|colors | array of colors | required | none | Colors displayed by list|
onChange | function| required| none| New list of colors and event that triggered change
colorFormat | "hex"
| "rgb"
|"hsl"
| optional|"hex"
|Format of colors in colors array
defaultColor | string color in same format as those in colors array | optional| White| The default color for new colors added
disableAlpha|bool|optional|false|Whether alpha slider should be visible
maxColors| positive integer| optional| Infinity| Max number of colors that can be added to list
minColors| positive integer| optional| 0| Min number of colors that can be in the color list
onMaxColorsReached| function| optional| none| Function that is called when user has attempted to add more than max number of colors
onMinColorsReached| function| optional| none| Function that is called when user has attempted to remove more than min number of colors
shouldAnimate| bool| optional| true| If the color swatches should animate in
animationLength| double| optional| 0.1| Seconds for each swatch to animate in
animationOffset|double| optional| 0.05| Seconds between start of each swatch animation
loadFromLeft| bool| optional| false| If new colors should be added to left side (at index 0)
flipAddButton |bool| optional| false| If add color button should be flipped to left side
popoverProps| object| optional| none| Props supplied to MUI Popover
containerProps| object| optional| none| Props supplied to list container,
className| string| optional| none| Class name supplied to list container
swatchLabelProps | object| optional|none| Props supplied to swatch label
removeButtonProps| object| optional|none| Props supplied to MUI Button for removing
saveButtonProps| object| optional|none| Props supplied to MUI Button for saving
saveButtonProps| object| optional|none| Props supplied to MUI IconButton for adding
swatchLabelColor| function| optional| black/white inverse| Color of swatch label in any format (hex, rgb, etc)
swatchActiveBorderColor|function| optional| inverse| Color of swatch border when swatch is active in any format (hex, rgb, etc)
AddButton| Element| optional|none| Button replacement for adding color that takes prop addColor
function
RemoveButton| Element| optional|none| Button replacement for removing colors that takes prop removeColor
function
SaveButton| Element| optional|none| Button 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>
}}
/>
}