preact-image-palette
A Preact adpater for image-palette-core
Install
npm install --save preact-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 'preact-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.