react-palette
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

REACT PALETTE

Extract prominent colors from an image

Build Status Coverage Status

Install

npm i -S react-palette

Usage

import Palette from 'react-palette';
// In your render...
<Palette src={IMAGE_URL}>
  {({ data, loading, error }) => (
    <div style={{ color: data.vibrant }}>
      Text with the vibrant color
    </div>
  )}
</Palette>
import { usePalette } from 'react-palette'
 
const { data, loading, error } = usePalette(IMAGE_URL)
 
<div style={{ color: data.vibrant }}>
  Text with the vibrant color
</div>

Palette callback example

{
  darkMuted: "#2a324b"
  darkVibrant: "#0e7a4b"
  lightMuted: "#9cceb7"
  lightVibrant: "#a4d4bc"
  muted: "#64aa8a"
  vibrant: "#b4d43c"
}

Notes

That library was created using node-vibrant to extract the prominent colors.

https://github.com/akfish/node-vibrant

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.2
    1,466
    • latest

Version History

Package Sidebar

Install

npm i react-palette

Weekly Downloads

1,473

Version

1.0.2

License

ISC

Unpacked Size

20.9 kB

Total Files

20

Last publish

Collaborators

  • leonardokl