@mapbox/react-colorpickr

    9.0.3 • Public • Published

    A colorpicker for React

    npm version Build Status

    Demo

    Install

    npm install @mapbox/react-colorpickr
    

    You'll also want to include a copy of colorpickr.css in your code.

    <link href='react-colorpickr.css' rel='stylesheet' />

    Usage

    import React from 'react'
    import ColorPicker from '@mapbox/react-colorpickr'
    
    function Example() {
      return (
        <ColorPicker onChange={console.log} />
      )
    }

    Required properties

    onChange (color) => void

    Value should be a function and is called whenever a color is updated from the colorpicker. Returns a color object.

    Optional properties

    theme Object<[key: string]: string>

    By default, react-colorpickr depends on Assembly and the CSS located in dist/colorpickr.css. You can however, override it thanks to react-themeable which react-colorpickr uses internally. See the properties used and the class name values in theme.js.

    initialValue string

    Accepts any valid css color. If this isn't provided, a default color is used.

    mode 'hsl' | 'rgb'

    Initializes which color mode tab is active. Defaults to hsl.

    channel 'h' | 's' | 'l' | 'r' | 'g' | 'b'

    Initializes which color channel is active. Defaults to h.

    reset boolean

    When true, a reset button is added that when pressed, reverts to the initialized color. Defaults to true.

    alpha boolean

    When true, a alpha range slider and input is provided. Defatuls to true.

    mounted (ColorPickr) => void

    To use internal methods from react-colorpickr, mounted provides access to the components instance. This is helpful for calling methods like overrideValue that can manually set a new color.

    const [instance, setInstance] = useState(null);
    
    const override = () => {
      instance.overrideValue('red');
    };
    
    render() {
      <>
        <ColorPickr mounted={picker => setInstance(picker)} onChange={console.log} />
        <button onClick={override}>Override</button>
      </>
    }

    readOnly

    If true the colorpicker will render in a readonly state with values clearly shown and selectable, but not editable. Defaults to false.

    Developing

    npm install & npm start
    

    Then open http://localhost:9966 in browser.

    Keywords

    Install

    npm i @mapbox/react-colorpickr

    DownloadsWeekly Downloads

    151

    Version

    9.0.3

    License

    ISC

    Unpacked Size

    111 kB

    Total Files

    31

    Last publish

    Collaborators

    • mapbox-npm-01
    • mapbox-npm-02
    • mapbox-npm-07
    • mapbox-npm-03
    • mapbox-npm-04
    • mapbox-npm-09
    • mapbox-npm-05
    • mapbox-npm-06
    • mapbox-npm-08
    • mapbox-npm-advanced-actions
    • mapbox-npm-ci
    • mapbox-npm
    • mapbox-admin
    • mapbox-machine-user