Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including use-vibrant-hook with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var useVibrantHook = require("use-vibrant-hook")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

use-vibrant-hook v1.1.1

A react hooks binding for the node-vibrant library

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

Usage

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.

Example

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' }} />
    );
}

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free