react-color-list

    1.0.8 • Public • Published

    React-Color-List

    A full color palette manager for React

    MIT license npm version npm size

    Demo

    Live demo and sandbox

    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>
    }}
    />
    }

    Install

    npm i react-color-list

    DownloadsWeekly Downloads

    11

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    67.9 kB

    Total Files

    22

    Last publish

    Collaborators

    • matthewgferrari