Nutritious Pomegranate Muffins

    react-native-color-palette

    2.2.0 • Public • Published

    React Native Color Palette.

    A react native module for simple hex color selection

    alt text

    • Controlled and Uncontrolled implementations
    • Simple to use

    Getting started

    Install the color picker

    npm install react-native-color-palette --save
    
    import ColorPalette from 'react-native-color-palette'
     
    const UncontrolledColorPicker = () => (
      <ColorPalette
        onChange={color => alert(`Color selected: ${color}`)}
        defaultColor={'#C0392B'}
        colors={['#C0392B', '#E74C3C', '#9B59B6', '#8E44AD', '#2980B9']}
        title={"Uncontrolled Color Palette:"}
        icon={
          <Text></Text>
          // Icon can just be text or ASCII
        }
      />
    )
     
    const ControlledColorPicker = () => {
      let selectedColor = '#C0392B';
      return (
        <ColorPalette
          onChange={color => selectedColor = color}
          value={selectedColor}
          colors={['#C0392B', '#E74C3C', '#9B59B6', '#8E44AD', '#2980B9']}
          title={"Controlled Color Palette:"}
          icon={
            <Icon name={'check-circle-o'} size={25} color={'black'} />
          // 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

    Install

    npm i react-native-color-palette

    DownloadsWeekly Downloads

    302

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    59 kB

    Total Files

    13

    Last publish

    Collaborators

    • holmansv-developer