Color picker library for React (default react or mui compatible)
npm install @wellbees/color-picker-input
For React:
import { useState } from 'react'
import { ColorPicker } from '@wellbees/color-picker-input'
function App() {
const [colorValue, setColorValue] = useState('')
return <ColorPicker
value={colorValue}
inputType="input"
onChange={(color)=> setColorValue(color)}
/>
}
For @mui (v5):
import { useState } from 'react'
import { ColorPicker } from '@wellbees/color-picker-input'
function App() {
const [colorValue, setColorValue] = useState('')
return <ColorPicker
value={colorValue}
inputType="mui"
onChange={(color)=> setColorValue(color)}
/>
}
Name | Type | Default | Description |
---|---|---|---|
colorShowType |
circle | square
|
square |
Color representation shape in the input area |
pickerType |
chrome | twitter | github
|
chrome |
Picker representation shape |
specialColors | String[] | [] |
Used to define fixed colors in selectors. Available on Github and Twitter Selectors. Exam: ["#ff6961","#ffb480","#f8f38d","#42d6a4","#08cad1","#59adf6","#9d94ff","#c780e8"]
|
inputType |
input | mui
|
input |
Used to define ui type |
variant |
filled | outlined
|
outlined |
Used to define variant |
size |
small | medium
|
medium |
Used to define input padding |
className | String | Used to define class | |
autoFocus | Boolean | false |
Used to input focus |
value | String | The value for component | |
disabled | Boolean | false |
Used to input disable |
error | Boolean | false |
Used for red warning in case of error |
helperText | String | Used for helper text | |
fullWidth | Boolean | false |
Used to cover the full width of the container |
id | String | User to input id | |
name | String | Used to input name | |
label | String | Used to input label | |
placeholder | String | Used to input placeholder | |
required | Boolean | false |
Used to define input require |
resetIcon | svg |
Revert Icon |
Used to define reset icon |
onFocus | Function | Exam: function(e) => void
|
|
onBlur | Function | Exam: function(e) => void
|
|
onClick | Function | Exam: function(e) => void
|
|
onChange | Function | Exam: function(color) => void
|
- Three Different Picker
- Live Color Preview
- Default React and Mui (v5) compatible
React: 17.0.1
react-color, mui, style-sheet, prop-types
If you have any feedback, please contact us at tech@wellbees.co.