Wondering what’s next for npm?Check out our public roadmap! »

    react-color-palette

    4.0.0 • Public • Published

    react-color-palette

    2KB color picker component for React.

    Installation

    npm

    npm install react-color-palette

    yarn

    yarn add react-color-palette

    Usage

    import ColorPicker, { useColor } from "react-color-palette";
    import "react-color-palette/lib/css/styles.css";
    
    export const App = () => {
      const [color, setColor] = useColor("hex", "#121212");
    
      return <ColorPicker width={456} height={228} color={color} onChange={setColor} hideHSB dark />;
    };

    Overriding styles

    If the default colors don't fit your project, you can always change them.

    Example for the Light theme
    .rcp-light {
      --rcp-background: #ffffff;
      --rcp-input-text: #111111;
      --rcp-input-border: rgba(0, 0, 0, 0.1);
      --rcp-input-label: #717171;
    }
    Example for the Dark theme
    .rcp-dark {
      --rcp-background: #181818;
      --rcp-input-text: #f3f3f3;
      --rcp-input-border: rgba(255, 255, 255, 0.1);
      --rcp-input-label: #999999;
    }

    API

    'Color' type

    Color

    Field Type
    hex string
    rgb ColorRGB
    hsb ColorHSB

    ColorRGB

    Field Type
    r number
    g number
    b number

    ColorHSB

    Field Type
    h number
    s number
    b number

    ColorPicker Props

    Name Type Default Description
    width number The width of the color picker.
    height number width The height of the color picker.
    color Color The current Color.
    onChange Function The function that accepts the updated Color as a single argument.
    hideHEX bool false Hide HEX input.
    hideRGB bool false Hide RGB input.
    hideHSB bool false Hide HSB input.
    dark bool false Color theme.

    useColor Arguments

    Name Type Default Description
    format "hex" | "rgb" | "hsb" The color format.
    initialColor string | ColorRGB | ColorHSB The initial color in the selected color format.

    toColor Arguments

    Name Type Default Description
    format "hex" | "rgb" | "hsb" The color format.
    color string | ColorRGB | ColorHSB The color in the selected color format.

    License

    Code released under the MIT license.

    Install

    npm i react-color-palette

    DownloadsWeekly Downloads

    731

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    34 kB

    Total Files

    71

    Last publish

    Collaborators

    • avatar