react-image-palette

Generate a WCAG compliant color theme from any image.

RiREACT IMAGEPALETTE

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

PropertyTypeDescription
imageString!The URL for the image to parse.
crossOriginBooleanSets the crossOrigin property on the Image instance that loads the source image 1
renderPalette => ReactElementIf you prefer to use a render prop over a function child, go for it! react-image-palette supports both.
defaultsPaletteA 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.

Work With Us

We partner with our clients to build all manner of digital products. Wherever you are in your product lifecycle, from concept to launch, our team of design and engineering experts will ensure you meet your web or mobile app's goals.