react-image-palette

Create ARIA-compliant color themes based on any image.

Usage no npm install needed!

<script type="module">
  import reactImagePalette from 'https://cdn.skypack.dev/react-image-palette';
</script>

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.