Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 12 days 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 (almost 9 years ago)
Default Branch: master
Last Pushed: 2019-12-25T11:51:30.000Z (almost 5 years ago)
Last Synced: 2024-10-22T08:55:53.895Z (20 days ago)
Topics: color-picker, component, react, react-native
Language: JavaScript
Homepage: http://andcards.github.io/react-colorizer/
Size: 10.5 MB
Stars: 62
Watchers: 3
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