@nicmosc/react-image-palette NPM

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.

@nicmosc/image-palette-core

@everything-registry/sub-chunk-651

0.2.6

5 years ago

0.2.5

5 years ago