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

¹ ⚠️ 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.