Skip to content
React hook binding for node-vibrant
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

This library provides a react hook which integrates with node-vibrant.


const { colors, done } = useVibrant(imageUrl);

Colors outputs the vibrant palette object of several swatches. Each one represents a different color found in the image. For more information on this, visit their docs.

It also outputs a done value, indicating whether or not the processing is complete. You may wish to use this to prevent components from rendering until you have successfully extracted colors from the images.


import React from 'react';
import useVibrant from 'useVibrant';

export default MyCoolComponent({imageUrl}) {
    const { colors, done } = useVibrant(imageUrl);

    return (
        done && <div style={{backgroundColor: colors.Vibrant.hex, width: '100px', height: '100px' }} />
You can’t perform that action at this time.