Super tiny color input ranges for React.

Overview

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

Usage

import { HueSelector } from 'react-color-range';
import 'react-color-range/style.css';

[...]

// with hex colors
<HueSelector
  value={colorHex}
  onChange={color => {
    changeColorHook(color.hex); // also `color.hsl`, `color.h`, `color.s` and `color.l`
  }}
/>

<SaturationSelector
  value={colorHex}
  onChange={color => {
    changeColorHook(color.hex);
  }}
/>

<LuminositySelector
  value={colorHex}
  onChange={color => {
    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
Owner
Javier Bórquez
I want to become stronger.
Javier Bórquez
keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

Abhiram K 23 Dec 16, 2021
react-native-card-data-input - just another credit card input package

react-native-card-data-input - just another credit card input package

Erick Estevão Riva Pramio 6 Oct 25, 2021
A super simple react-native implementation of the UIStepper control from iOS.

react-native-simple-stepper A simple react-native implementation of the UIStepper control from iOS. To note, customization is available, see Props for

Brian 100 Dec 25, 2021
React Native Super Alert - 3 alerts in just only component

React Native Super Alert is a component where you can use various types of alerts and notifications without having to import the library on all screen

Alan Ribeiro 4 Oct 14, 2021
Super performant, lightweight, fully customizable emoji picker 🚀

?? rn-emoji-keyboard A lightweight, fully customizable emoji picker, written as React Native component (without native elements). Designated to be use

TWG 56 Dec 12, 2021
:rainbow: A react native reusable and color picker wheel

react-native-color-wheel ?? A react native reusable and color picker wheel Usage import React, { Component } from 'react'; import { Dimensions, StyleS

Netbeast 159 Jan 7, 2022
Module for change color of react-native footer navigation bar and Statusbar

React Native Footer Navigation Bar Color and Status Bar react-native-navbar-color Simple package that will set footer navigation bar color. Do you nee

Bhavan Patel 47 Dec 13, 2021
Color picker component for IOS/Android

react-native-color-picker React Native implementation of color picker for both Android and iOS. works both in controlled and uncontrolled way old colo

null 240 Dec 30, 2021
This reactnative package provides custom header component for mobile apps. also providing utility method to change statusbar color.

A @mindinventory/rn-top-navbar package is use to create custom navigation for react native apps. user can fully customize navbar. you can change the background color of statusbar. Navigation can contain component like icon, image, text.

MindInventory 25 Dec 14, 2021
🚀 Tiny and fast animated image gallery for react-native

React Native Animated Gallery ?? Tiny and fast animated image gallery for react-native Getting started npm i react-native-animated-gallery --save or y

Vivek JM 21 Dec 29, 2021
A tiny fully customizable react hook which gives you full list of countries with their flags

use-react-countries A tiny fully customizable react hook which gives you full li

Vrezh Oganisyan 9 Jan 1, 2022
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!

React Native Credit Card Input Easy (and good looking) credit-card input for your React Native Project ?? ?? Code: <CreditCardInput onChange={this._on

Sam Aryasa 1.3k Jan 10, 2022
A pure javascript masked text and input text component for React-Native.

react-native-masked-text This is a simple masked text (normal text and input text) component for React-Native. Alert Hey guys! Unfortunatelly I'm not

Ben-hur Santos Ott 1.5k Jan 12, 2022
Text input mask for React Native, Android and iOS

react-native-text-input-mask Text input mask for React Native on iOS and Android. Examples Setup npm install --save react-native-text-input-mask # --

null 1.1k Jan 11, 2022
Pure javascript autocomplete input for react-native

react-native-autocomplete-input A pure JS autocomplete component for React Native. Use this component in your own projects or use it as inspiration to

Laurence Bortfeld 678 Jan 11, 2022
Phone input box for React Native

React Native Phone Input Phone input box for React Native Installation npm i react-native-phone-input --save Basic Usage import PhoneInput from 'reac

Watcharachai Kanjaikaew 376 Jan 12, 2022
React Native Telephone Input

React Native Telephone Input This library is a forked of React Telephone Input. Basic feature for mask and country discover Support iOS and Android Ba

Kundigo 39 Dec 9, 2021
React Native Calculator and Calculator Input Component

React Native Calculator Simple react native calculator and calculator input component. Installation Using npm: npm i -S react-native-calculator or ya

Budi Adiono 22 Dec 16, 2021
🔢 React-Native component to input confirmation code for both Android and IOS

rn-verifcode React-Native component to input confirmation code for both Android and IOS customizable fast paste SMS-code copy from clipboard reset cod

Xavier Carpentier 22 Nov 4, 2021