react-best-gradient-color-picker

react-best-gradient-color-picker

• Customizable, easy to use color and gradient picker for React.js
• Simply pass in an rgba or css gradient string as value and an onChange handler
• UI will default to solid or gradient based on the value string it receives
• You can customize the UI by hiding the various elements and using the API functions to build your own inputs, controls, etc.

Install

npm install react-best-gradient-color-picker

Example

import React from 'react'
import ColorPicker from 'react-best-gradient-color-picker'

function MyApp() {
  const [color, setColor] = useState('rgba(255,255,255,1');

  return <ColorPicker value={color} onChange={setColor} />
}

Props

Name	Type	Default	Description
value	string	'rgba(175, 51, 242, 1)'	The starting color
hideInputs	boolean	false	(optional) hide the hex and rgba inputs
hidePresets	boolean	false	(optional) hide the preset color options
hideControls	boolean	false	(optional) hide the solid/gradient and gradient options

API

Name	Description
onChange	A function to update color value

License

Code released under the MIT license.