react-color README

The project's README from github.com/casesandberg/react-color. As one markdown file: README.md.

React Color

Npm Version Build Status License Downloads

Demo

Demo

Live Demo

Installation & Usage

npm install react-color --save

Include the Component

import React from 'react'
import { SketchPicker } from 'react-color'

class Component extends React.Component {

  render() {
    return <SketchPicker />
  }
}

You can import AlphaPicker BlockPicker ChromePicker CirclePicker CompactPicker GithubPicker HuePicker MaterialPicker PhotoshopPicker SketchPicker SliderPicker SwatchesPicker TwitterPicker respectively.

100% inline styles via ReactCSS

react-color (casesandberg/react-color)

Searching Database…

这是什么?React Color 是一套面向 React 的 13 个取色器组件的合集,复刻了大家在 Sketch、Photoshop、Chrome、GitHub 和 Twitter 里熟悉的那几种取色器。
这是一个独立的应用,还是一套要接进我自己 React 代码里的组件?它是发布在 npm 上的 React 组件库——每个取色器(SketchPicker、ChromePicker、PhotoshopPicker 等等)都是一个组件,你在自己的应用里导入并渲染即可。
怎么把取色器加到我的项目里?从 npm 安装,然后只导入你想要的取色器就行——这个包导出 13 个组件,从 AlphaPicker、CirclePicker 一直到 SketchPicker 和 TwitterPicker。
除了 React 它还依赖什么?reactcss 负责内联样式,tinycolor2 负责颜色转换,另外还带上 lodash、material-colors、prop-types 和 @icons/material——全是纯 JavaScript,没有任何原生代码。
这些取色器需要配置 CSS 吗?会不会和我现有的样式冲突?不会——这些组件不带任何样式表,因为所有样式都通过 ReactCSS 内联实现,所以既没有东西需要导入,也不会和你的 CSS 冲突。
它内置了哪些现成的取色器?一共 13 个:Sketch、Photoshop、Chrome、GitHub、Twitter,还有 Material、Compact、Swatches、Circle、Block、Slider、Hue 和 Alpha。
我能不能不用这些预设,做一个和我自己界面风格一致的取色器?可以——README 的第二大特性就是让你用这个库导出的基础组件自己拼出一个取色器。
安装之前我能先试试这些取色器吗?可以,README 里链接了一个在线演示,你可以在浏览器里试用全部 13 个取色器。
它经过多少实际考验?它从 2015 年 8 月起就在 GitHub 上了,有超过 12000 颗星,测试脚本跑的是 Jest 和 ESLint。
Size
5.8 MB
Stars
12.3K
Age
11y
Commits · 90 Days