https://github.com/holmansv/react-native-color-palette

A react native module for simple hex color selection
https://github.com/holmansv/react-native-color-palette

Last synced: about 1 month ago
JSON representation

A react native module for simple hex color selection

• Host: GitHub
• URL: https://github.com/holmansv/react-native-color-palette
• Owner: holmansv
• License: mit
• Created: 2018-08-14T13:15:11.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-03T10:11:40.000Z (over 1 year ago)
• Last Synced: 2024-10-05T16:04:28.952Z (about 1 month ago)
• Language: JavaScript
• Size: 1.38 MB
• Stars: 53
• Watchers: 6
• Forks: 19
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native Color Palette.

A react native module for simple hex color selection

![alt text](./images/color-picker.png "Logo Title Text 1")

* [x] Controlled and Uncontrolled implementations

* [x] Simple to use

## Getting started

Install the color picker

```

npm install react-native-color-palette --save

```

```javascript

import ColorPalette from 'react-native-color-palette'

const UncontrolledColorPicker = () => (

   alert(`Color selected: ${color}`)}

    defaultColor={'#C0392B'}

    colors={['#C0392B', '#E74C3C', '#9B59B6', '#8E44AD', '#2980B9']}

    title={"Uncontrolled Color Palette:"}

    icon={

      ✔︎

      // Icon can just be text or ASCII

    }

  />

)

const ControlledColorPicker = () => {

  let selectedColor = '#C0392B';

  return (

     selectedColor = color}

      value={selectedColor}

      colors={['#C0392B', '#E74C3C', '#9B59B6', '#8E44AD', '#2980B9']}

      title={"Controlled Color Palette:"}

      icon={

        

      // React-Native-Vector-Icons Example

    }

  />)

}

```

Due to its Flexbox design, Color Palette will use the space you provide!

## API

### Props

Color Palette accepts properties below.

| Property        | Type             | Note                                                                                                                           |

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

| `colors`        | `Array`          | Array of hex color strings for rendering. ex) ['#C0392B', '#E74C3C', '#9B59B6', '#8E44AD', '#2980B9']                          |

| `defaultColor`  | `String`         | Defines initial selected color in uncontrolled component.                                                                      |

| `value`         | `String`         | Defines selected color in controlled component.                                                                                |

| `paletteStyles` | `ViewStyle`      | Styles passed to color palette container                                                                                       |

| `onChange`      | `Function`       | Callback with color (HEX string) as argument called when user confirms color selection.                                        |

| `title`         | `String`         | Text to display at the top of the palette.                                                                                     |

| `titleStyles`   | `TextStyle`      | Inherits the default react-native Text Styles                                                                                  |

| `icon`          | `Text` or `Icon` | Selector Text or Icon to be displayed in place of checkmark.                                                                   |

| `scaleToWindow` | `Bool`           | This will automatically scale the palette to fit 6 per line and will scale up/down for iPads/ iPhones depending on window size |