@nicmosc/react-image-palette
v0.2.6
Published
Create ARIA-compliant color themes based on any image.
Downloads
6
Readme
react-image-palette
A React adpater for image-palette-core
Install
npm install --save react-image-palette
Usage
The main export of the package is the ImagePalette
component, which uses a render callback to provide the color palette after the image is parsed.
import ImagePalette from 'react-image-palette'
const SomeComponent = ({ image }) => (
<ImagePalette image={image}>
{({ backgroundColor, color, alternativeColor }) => (
<div style={{ backgroundColor, color }}>
This div has been themed based on
<span style={{ color: alternativeColor }}>{image}</span>
</div>
)}
</ImagePalette>
)
API
Palette
See the image-palette-core
documentation
Props
Property | Type | Description
:-----------------------|:--------------|:--------------------------------
image
| String!
| The URL for the image to parse.
crossOrigin
| Boolean
| Sets the crossOrigin
property on the Image
instance that loads the source image 1
render
| Palette => ReactElement
| If you prefer to use a render
prop over a function child, go for it! react-image-palette
supports both.
defaults
| Palette
| A default palette to render if a palette cannot be parsed. This would typically occur when the source image fails to load
1 ⚠️ Keep in mind that the image will be loaded into a canvas and parsed as data, so you should only use images from trusted origins.