https://github.com/spacebring/react-colorizer

🌈 A Color Picker Component for React and React Native.
https://github.com/spacebring/react-colorizer

color-picker component react react-native

Last synced: over 1 year ago
JSON representation

🌈 A Color Picker Component for React and React Native.

• Host: GitHub
• URL: https://github.com/spacebring/react-colorizer
• Owner: spacebring
• License: mit
• Archived: true
• Created: 2015-12-01T11:19:20.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2019-12-25T11:51:30.000Z (over 6 years ago)
• Last Synced: 2025-03-18T03:49:00.081Z (over 1 year ago)
• Topics: color-picker, component, react, react-native
• Language: JavaScript
• Homepage: http://andcards.github.io/react-colorizer/
• Size: 10.5 MB
• Stars: 62
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-colorizer

[![Greenkeeper badge](https://badges.greenkeeper.io/andcards/react-colorizer.svg)](https://greenkeeper.io/)

[![Build Status](https://travis-ci.org/andcards/react-colorizer.svg?branch=master)](https://travis-ci.org/andcards/react-colorizer)

[![npm package](https://badge.fury.io/js/react-colorizer.svg)](https://www.npmjs.org/package/react-colorizer)

[![Dependency Status](https://david-dm.org/andcards/react-colorizer.svg)](https://david-dm.org/andcards/react-colorizer)

[![devDependency Status](https://david-dm.org/andcards/react-colorizer/dev-status.svg)](https://david-dm.org/andcards/react-colorizer#info=devDependencies)

[![peerDependency Status](https://david-dm.org/andcards/react-colorizer/peer-status.svg)](https://david-dm.org/andcards/react-colorizer#info=peerDependencies)

A color picker component for React and React Native.

![](https://github.com/andcards/react-colorizer/blob/master/demo.gif)

Check out our app built on top of this component:

- Download from [Google Play Store](https://play.google.com/store/apps/details?id=com.cards.colorizer)

### Installation

```

yarn add react-colorizer

```

### The Gist

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import ColorPicker from 'react-colorizer';

import fullScheme, { HarmonyTypes } from 'color-harmony-generator';

const selectedScheme = HarmonyTypes.TRIAD;

function onColorChanged(color) {

  const fullScheme = color.fullScheme(selectedScheme);

}

ReactDOM.render(

  ,

  document.getElementById('Container')

);

```

### API

prop                  | type                 | default value

----------------------|----------------------|--------------

`color`               | `string`             | '#ff0000'

`height`              | `number`             |

`width`               | `number`             |

`onColorChanged`      | `func`               |

`onColorChangeEnd`    | `func`               |

`onColorChangeStart`  | `func`               |

### Want to contribute?

Please see [CONTRIBUTING.md](CONTRIBUTING.md)

### License

MIT