preact-image-palette

0.1.1 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i preact-image-palette

Weekly Downloads

1

Version

0.1.1

License

MIT

Last publish

Collaborators

  • aweary