Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/hectahertz/react-native-color

Color components for React Native 🌈
https://github.com/hectahertz/react-native-color

color color-picker react-native

Last synced: about 3 hours ago
JSON representation

Color components for React Native 🌈

Awesome Lists containing this project

README

        

# React Native Color

Color components for React Native. JavaScript-only, for iOS and Android.

[![npm version](https://img.shields.io/npm/v/react-native-color.svg)](https://www.npmjs.com/package/react-native-color)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
[![npm downloads](https://img.shields.io/npm/dm/react-native-color.svg)](https://www.npmjs.com/package/react-native-color)

## Example

* Run the example app
[via Expo](https://expo.io/@hectahertz/react-native-color-example) or
[check the code](example/App.js).

## SlidersColorPicker

Based on a
[Dribbble concept](https://dribbble.com/shots/3959594-Color-Picker-Concept?utm_source=Twitter_Shot)
by [Satyajit Sahoo](https://twitter.com/satya164).

![SlidersColorPicker](images/sliderscolorpicker.gif)

## Gradients

With a customizable number of steps, shape and direction.

![Gradients](images/gradients.png)

## Sliders

The simplest hue/staturation/value selectors!

![Sliders](images/sliders.png)

## Setup

```sh
yarn add react-native-color
```

Or, if you use npm, `npm i --save react-native-color`.

## Roadmap

* Make the color string editable
* Support different color modes for the return string of the pickers
* Support different color modes for the sliders of the
* Gradient that mixes two colors
* Add documentation for the props
* Support for themes/render customizations
* Export separate components for a build-your-own philosophy
* Type with [Flow](https://flow.org/)

## Contact

[Tweet me @hectahertz](https://twitter.com/hectahertz)