{"library":"react-color-palette","title":"React Color Palette","description":"react-color-palette is a lightweight, performant React component library providing a comprehensive color picker interface. Currently stable at version 7.3.1, it receives regular maintenance and feature updates, with minor releases typically occurring every few months. Its core strength lies in its flexibility, offering a complete `<ColorPicker />` component for immediate use, alongside individual `<Saturation />`, `<Hue />`, and `<Alpha />` components for creating highly customized color picker layouts. It fully supports TypeScript, shipping with declaration files for all its components and hooks like `useColor`. Key features include robust support for various CSS color formats (HEX, RGB, HSL, named colors) in the `useColor` hook, an `onChangeComplete` callback for handling final color selections, and options to customize input visibility or disable the picker entirely. This makes it a versatile choice for applications requiring intuitive and customizable color selection capabilities within a React environment.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-color-palette"],"cli":null},"imports":["import { ColorPicker } from 'react-color-palette';","import { useColor } from 'react-color-palette';","import 'react-color-palette/css';","import { type IColor } from 'react-color-palette';","import { Saturation } from 'react-color-palette';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { ColorPicker, useColor } from 'react-color-palette';\nimport 'react-color-palette/css';\n\nfunction MyColorPickerComponent() {\n  // Initialize the color state using the useColor hook. \n  // It can accept HEX, RGB, HSL, or named CSS colors.\n  const [color, setColor] = useColor('#561ecb');\n\n  // Optional: Define a callback for when the color selection is finalized (e.g., mouse up).\n  const handleColorChangeComplete = (selectedColor) => {\n    console.log('Final color selected:', selectedColor.hex);\n    // Example: Save to local storage or dispatch an action\n    localStorage.setItem('lastSelectedColor', selectedColor.hex);\n  };\n\n  return (\n    <div>\n      <h1>My Application Color Selector</h1>\n      <ColorPicker \n        color={color} \n        onChange={setColor} \n        height={250} \n        width={450}\n        onChangeComplete={handleColorChangeComplete}\n        hideInput={['rgb', 'hsv']}\n      />\n      <p>Current HEX Color: {color.hex}</p>\n      <p>Current RGB Color: {color.rgb.r}, {color.rgb.g}, {color.rgb.b}</p>\n    </div>\n  );\n}\n\nexport default MyColorPickerComponent;","lang":"typescript","description":"This quickstart demonstrates the basic setup of the ColorPicker component, including state management with `useColor`, importing necessary CSS, and handling both continuous color changes and final selection with `onChangeComplete`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}