use-vibrant-hook
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    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' }} />
        );
    }
    Tip: Click on a version number to view a previous version's package page

    Current Tags

    • Version
      Downloads (Last 7 Days)
      • Tag
    • 1.1.1
      12
      • latest

    Version History

    • Version
      Downloads (Last 7 Days)
      • Published
    • 1.1.1
      12
    • 1.1.0
      0
    • 1.0.3
      0
    • 1.0.2
      0
    • 1.0.1
      0

    Install

    npm i use-vibrant-hook

    DownloadsWeekly Downloads

    12

    Version

    1.1.1

    License

    ISC

    Unpacked Size

    3.32 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar