• Stars
    star
    244
  • Rank 165,885 (Top 4 %)
  • Language
    JavaScript
  • Created almost 10 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React color picker

react-input-color

npm npm Build Status codecov styled with prettier

React input color component with hsv color picker

The color picker is inspired by the sketch color picker

screenshot

Starting from v2, this component is rewritten with emotion and it doesnot require any external css file.

Installation

npm install react-input-color --save
yarn add react-input-color

Storybook Demo

https://react-input-color.caitouyun.com

Usage

The initialValue property supports 6 (#RRGGBB) and 8 (#RRGGBBAA) digits hex value.

import React from 'react';
import InputColor from 'react-input-color';

function App() {
  const [color, setColor] = React.useState({});

  return (
    <div>
      <InputColor
        initialValue="#5e72e4"
        onChange={setColor}
        placement="right"
      />
      <div
        style={{
          width: 50,
          height: 50,
          marginTop: 20,
          backgroundColor: color.rgba,
        }}
      />
    </div>
  );
}

License

MIT

More Repositories

1

react-ui-tree

React tree component with drag & drop
JavaScript
758
star
2

queryx

Schema-first and type-safe ORM for Golang and TypeScript
Go
186
star
3

react-input-slider

React input slider component
JavaScript
141
star
4

react-progress-label

Progress component for React and React Native
JavaScript
92
star
5

react-frame

React components within an iframe for isolated css styling
JavaScript
55
star
6

bloodhound

bloodhound.js for node and browser
JavaScript
41
star
7

js-tree

Tree structure in javascript
JavaScript
38
star
8

react-grid

react grid component
JavaScript
17
star
9

react-input-number

React number input component
JavaScript
15
star
10

react-input-switch

React toggle switch component
JavaScript
13
star
11

dashi

Dashi is a framework for building GraphQL application in Go and React.
Go
12
star
12

stream-progressbar

Simple progress bar for node stream
JavaScript
8
star
13

react-vis-styles

react-vis styles as component
JavaScript
6
star
14

webpacker

Easy webpack
JavaScript
6
star
15

react-side-sheet

react side sheet
JavaScript
5
star
16

react-auth

Authentication in React and React Native
JavaScript
4
star
17

rex

schema-first and type-safe ORM
JavaScript
3
star
18

react-normalize

normalize.css as react component
JavaScript
3
star
19

request

HTTP client for web and React Native
JavaScript
2
star
20

storage2

html5 storage interface for node and browser
JavaScript
2
star
21

s2i-webpacker

openshift source-to-image for webpacker
Shell
2
star
22

react-ionicons

ionicons svg component for react
JavaScript
2
star
23

gradient-avatar

Default gradient avatar generation
Go
2
star
24

color

go color functions
Go
1
star
25

react-resize-box

JavaScript
1
star
26

primitives

react primitives for web
JavaScript
1
star
27

react-pagination

React pagination component
JavaScript
1
star
28

utils

utils
JavaScript
1
star
29

yaml-loader

webpack yaml loader
JavaScript
1
star
30

babel-preset-swiftcarrot

babel config
JavaScript
1
star