Color Picker Input Component For React

An easy-to-use color picker component with live color preview for React applications. It currently comes with 3 color picker types: Chrome, Twitter, and Github.

How to use it:

1. Install and import the color picker input.

# NPM
$ npm i @wellbees/color-picker-input
import { useState } from 'react'
import { ColorPicker } from '@wellbees/color-picker-input'

2. Basic usage.

function App() {
  const [colorValue, setColorValue] = useState('')
  return <ColorPicker 
    value={colorValue}
    inputType="input"
    onChange={(color)=> setColorValue(color)} 
  />
}

3. Available component props.

colorShowType: PropTypes.oneOf(['circle', 'square']),
pickerType: PropTypes.oneOf(['chrome', 'twitter', 'github']),
specialColors: PropTypes.array,
inputType: PropTypes.oneOf(['mui', 'input']),
variant: PropTypes.oneOf(['filled', 'outlined', 'standard']),
size: PropTypes.oneOf(['small', 'medium', 'large']),
className: PropTypes.string,
autoFocus: PropTypes.bool,
value: PropTypes.string.isRequired,
disabled: PropTypes.bool,
error: PropTypes.bool,
helperText: PropTypes.string,
fullWidth: PropTypes.bool,
id: PropTypes.string,
name: PropTypes.string,
label: PropTypes.string,
placeholder: PropTypes.string,
required: PropTypes.bool,
resetDefaultButton: PropTypes.bool,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
onClick: PropTypes.func,
onChange: PropTypes.func,

Download Details:

Author: wellbees

Live Demo: https://github.com/wellbees/color-picker-input/tree/main/example

Download Link: https://github.com/wellbees/color-picker-input/archive/refs/heads/main.zip

Official Website: https://github.com/wellbees/color-picker-input

Install & Download:

Add Comment