{"library":"react-colorful","title":"React Colorful Color Picker","description":"React Colorful is a highly optimized and lightweight color picker component designed for React and Preact applications. Currently stable at version 5.6.1, it provides a variety of color models including HEX, RGBA, HSLA, and HSVA, boasting a minimal bundle size (just 2.8 KB gzipped) and zero runtime dependencies. The library features a modern API leveraging React hooks and functional components, and comes with comprehensive TypeScript support. It prioritizes accessibility, adhering to WAI-ARIA guidelines, and offers full keyboard navigation and touch screen compatibility. A key differentiator is its significant performance and size advantage over alternatives like `react-color`, coupled with a tree-shakable architecture. Since v5, it has eliminated the need for external CSS imports, streamlining integration into any CSS-in-JS or component library environment. Releases are driven by feature enhancements and bug fixes, ensuring continuous improvement and stability.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-colorful"],"cli":null},"imports":["import { HexColorPicker } from 'react-colorful';","import { RgbaColorPicker } from 'react-colorful';","import { HexAlphaColorPicker } from 'react-colorful';","import type { ColorPickerBaseProps } from 'react-colorful';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { HexColorPicker } from 'react-colorful';\n\nconst MyColorPickerComponent = () => {\n  const [color, setColor] = useState('#aabbcc');\n\n  return (\n    <div>\n      <p>Selected Color: {color}</p>\n      <HexColorPicker color={color} onChange={setColor} />\n      <button onClick={() => setColor('#ff0000')}>Set Red</button>\n      <button onClick={() => setColor('#00ff00')}>Set Green</button>\n      <button onClick={() => setColor('#0000ff')}>Set Blue</button>\n    </div>\n  );\n};\n\nexport default MyColorPickerComponent;","lang":"typescript","description":"This quickstart demonstrates how to integrate the HexColorPicker component, manage its state using React hooks, and update the color dynamically. It also shows basic interactions.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}