https://github.com/javierbyte/react-color-range

Super tiny color input ranges for React.
https://github.com/javierbyte/react-color-range

color color-picker input react-component

Last synced: 4 months ago
JSON representation

Super tiny color input ranges for React.

• Host: GitHub
• URL: https://github.com/javierbyte/react-color-range
• Owner: javierbyte
• License: bsd-3-clause
• Created: 2022-01-08T21:31:38.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-05-03T19:08:22.000Z (about 3 years ago)
• Last Synced: 2025-01-05T22:27:29.901Z (6 months ago)
• Topics: color, color-picker, input, react-component
• Language: JavaScript
• Homepage: https://javier.xyz/react-color-range/
• Size: 2.9 MB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-color-range · [![](https://badgen.net/bundlephobia/minzip/react-color-range@latest)](https://bundlephobia.com/package/react-color-range)

Tiny color input for React, made with native input ranges. `react-color-range`

leverages the native `input type="range"` and CSS linear gradients to reduce the

bundle size.

[![react-blur](./website/public/react-color-range.jpg)](https://javier.xyz/react-color-range/)

## Usage

```jsx

import { HueSelector } from 'react-color-range';

import 'react-color-range/style.css';

[...]

// with hex colors

 {

    changeColorHook(color.hex); // also `color.hsl`, `color.h`, `color.s` and `color.l`

  }}

/>

 {

    changeColorHook(color.hex);

  }}

/>

 {

    changeColorHook(color.hex);

  }}

/>

```

Each of the three components accepts the following props:

- `value`: Either a hex color (example: `#FFFFFF`) or hsl color expressed with

  degrees for hue and percentages for saturation and luminosity separated by

  commas (example: `hsl(0, 100%, 50%)`). Please note that using hsl colors as

  the source is preferred to prevent color resolution lost on high and low

  luminosities.

- `onChange`: Function that will return an object when the color is changed.

  - On change response: And object with the following properties:

    - `hsl`: String. New hsl color

    - `hex`: String. New hex color

    - `h`, `s`, `l`: Int. Hue, saturation and luminosity, components of the hsl

      color