0.2.1 • Published 9 months ago

react-native-palette-picker v0.2.1

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

react-native-palette-picker

Android Color-palette API implementation for React Native Apps

Installation

with npm:

npm install react-native-palette-picker

with yarn:

yarn add react-native-palette-picker

Usage

import React from 'react'
import { getPalette, type ImageColorsResult} from 'react-native-palette-picker';

const useImageColors = () => {
  const [colors, setColors] = React.useState<ImageColorsResult>(null);
  const [err, setErr] = React.useState<unknown>();

   React.useEffect(() => {
    const imgUri = "https://i.imgur.com/RCRf1Sx.jpeg";
    (async () => {
      try {
        const res = await getPalette(imgUri, {
          fallback: '#ff0000',
          fallbackTextColor: '#ffffff',
        });
        setColors(res);
      } catch (error) {
        setErr(error);
      }
    })();
  }, []);

  return colors
}

API

getPalette(source: string | number, config?: Config): Promise<ImageColorsResult>

uri

A string which can be:

  • URL:

    https://i.imgur.com/RCRf1Sx.jpeg

  • Local file:

    const img = require('../assets/img.jpg');
  • Base64:

    const base64 = 'data:image/jpeg;base64,/9j/4Ri...';

    The mime type prefix for base64 is required (e.g. data:image/png;base64).

Config?

The config object is optional.

PropertyDescriptionTypeDefault
fallbackIf a color property couldn't be retrieved, it will default to this hex color stringstring"#000000"
fallbackTextColorText color used when getting color fails.(titleTextColor,bodyTextColor). Must be hexstring"#FFFFFF"

ImageColorsResult

PropertyType
dominantstring
vibrantstring
darkVibrantstring
lightVibrantstring
darkMutedstring
lightMutedstring
mutedstring
titleTextColorstring
bodyTextColorstring

Notes

Future work

  • iOS support (need ios dev)

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

If you are experienced with iOS development and would like to contribute, please feel free to submit pull requests or open issues related to iOS support. Your contributions will be greatly appreciated and will help make this library more versatile.

License

MIT


Made with create-react-native-library