react-native-palette-picker
v0.2.1
Published
Android Color-palette API implementation for React Native Apps
Downloads
54
Maintainers
Readme
react-native-palette-picker
Android Color-palette API implementation for React Native Apps
Installation
- React Native CLI
- Install this package using
npm
oryarn
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:
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.
| Property | Description | Type | Default |
| ------------------- | ------------------------------------------------------------------------------------ | -------- | --------- |
| fallback
| If a color property couldn't be retrieved, it will default to this hex color string | string
| "#000000" |
| fallbackTextColor
| Text color used when getting color fails.(titleTextColor,bodyTextColor). Must be hex | string
| "#FFFFFF" |
ImageColorsResult
| Property | Type |
| ---------------- | -------- |
| dominant
| string
|
| vibrant
| string
|
| darkVibrant
| string
|
| lightVibrant
| string
|
| darkMuted
| string
|
| lightMuted
| string
|
| muted
| string
|
| titleTextColor
| string
|
| bodyTextColor
| string
|
Notes
- There is an example app.
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