Socket
Socket
Sign inDemoInstall

react-colorful

Package Overview
Dependencies
Maintainers
1
Versions
70
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-colorful

🎨 A tiny (2,8 KB) color picker component for React and Preact apps. Fast, well-tested, dependency-free, mobile-friendly and accessible


Version published
Weekly downloads
5M
increased by3.52%
Maintainers
1
Weekly downloads
Β 
Created

What is react-colorful?

The react-colorful package is a tiny (approximately 1.5 KB) color picker component for React applications that is fast and without dependencies. It provides a modern, accessible, and extensible color picking solution that can be easily integrated into any React project.

What are react-colorful's main functionalities?

Hex Color Picker

This feature allows users to pick a color using a hex color picker. The component manages the color state and provides a callback for when the color changes.

{"import { HexColorPicker } from 'react-colorful';\n\nfunction App() {\n  const [color, setColor] = useState('#aabbcc');\n\n  return <HexColorPicker color={color} onChange={setColor} />;\n}"}

RGB Color Picker

This feature provides an RGB color picker where users can select a color based on its red, green, and blue components. The color state is managed by the component and updates are provided through a callback function.

{"import { RgbColorPicker } from 'react-colorful';\n\nfunction App() {\n  const [color, setColor] = useState({ r: 170, g: 187, b: 204 });\n\n  return <RgbColorPicker color={color} onChange={setColor} />;\n}"}

HSL Color Picker

This feature enables users to pick a color using HSL (Hue, Saturation, Lightness) values. The component allows for the selection of HSL values and provides updates through a change callback.

{"import { HslColorPicker } from 'react-colorful';\n\nfunction App() {\n  const [color, setColor] = useState({ h: 210, s: 50, l: 60 });\n\n  return <HslColorPicker color={color} onChange={setColor} />;\n}"}

Custom Color Picker

This feature allows for the creation of custom color pickers using the react-colorful library. Users can define their own UI and logic for the color picker while still leveraging the underlying functionality provided by react-colorful.

{"import { CustomPicker } from 'react-colorful';\nimport { useState } from 'react';\n\nconst MyColorPicker = CustomPicker(({ hex, onChange }) => (\n  <div>\n    <div style={{ backgroundColor: hex, width: '100px', height: '100px' }} />\n    <input value={hex} onChange={(e) => onChange(e.target.value)} />\n  </div>\n));\n\nfunction App() {\n  const [color, setColor] = useState('#aabbcc');\n\n  return <MyColorPicker color={color} onChange={setColor} />;\n}"}

Other packages similar to react-colorful

Keywords

FAQs

Package last updated on 18 Aug 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚑️ by Socket Inc