colorpicker

LiveDemo

Install

$ yarn add @caohenghu/colorpicker

Example

import ColorPicker from '@caohenghu/colorpicker'

export default class App {
    constructor(props) {
        super(props)
        this.changeColor = this.changeColor.bind(this)
        this.openSucker = this.openSucker.bind(this)
        this.color = '#59c7f9'
        this.$bg = null
        this.$cover = null
        this.suckerCanvas = null
        this.colorpicker = new ColorPicker({
            theme: '',
            color: this.color,
            suckerHide: false,
            openSucker: this.openSucker,
            changeColor: this.changeColor
        })
    }

    render() {
        this.$bg = document.querySelector('.bg')
        this.$cover = document.querySelector('.cover')
        this.$cover.appendChild(this.colorpicker.$el)
        this.$bg.style.background = this.color
    }

    changeColor(color) {
        const { r, g, b, a } = color.rgba
        this.$bg.style.background = `rgba(${r},${g},${b},${a})`
    }

    openSucker(isOpen) {
        if (isOpen) {
            // ... canvas be created, and get the area of canvas
            // this.colorpicker.canvasLoaded({
            //     suckerCanvas: this.suckerCanvas,
            //     suckerArea: [
            //         coverRect.left,
            //         coverRect.top,
            //         coverRect.left + coverRect.width,
            //         coverRect.top + coverRect.height
            //     ]
            // })
        } else {
            // this.suckerCanvas && this.suckerCanvas.remove()
        }
    }
}

new ColorPicker(options)

Options

| Name | Type | Default/Args | Description | | ---------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | | theme | String | dark | dark or light | | color | String | #000000 | rgba or hex | | colorsDefault | Array | ['#000000', '#FFFFFF', '#FF1900', '#F47365', '#FFB243', '#FFE623', '#6EFF2A', '#1BC7B1', '#00BEFF', '#2E81FF', '#5D61FF', '#FF89CF', '#FC3CAD', '#BF3DCE', '#8E00A7', 'rgba(0,0,0,0)'] | like ['#ff00ff', '#0f0f0f', ...] | | colorsHistoryKey | String | colorpicker-history | | suckerHide | Boolean | true | true or false | | changeColor | Function | color | { rgba: {}, hsv: {}, hex: '' } | | openSucker | Function | isOpen | true or false |

if you want to use sucker, then openSucker, suckerHide is necessary. and when canvas is ready, you can call function colorpicker.canvasLoaded width args suckerCanvas and suckerArea. when you click sucker button, you can click it again or press key of esc to exit.

colorpicker.canvasLoaded(options)

Options

| Name | Type | Default | Description | | ------------ | ----------------- | ------- | --------------------------------------- | | suckerCanvas | HTMLCanvasElement | null | like document.createElement('canvas') | | suckerArea | Array | [] | like [x1, y1, x2, y2] |

colorpicker.close()

when you want to close colorpicker, you can call function colorpicker.close(), it can remember current color into history.