Chameleon.js

Lorem ipsum dolor sit amet, consectetur adipiscing elit."Lorem ipsum"

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

React-chameleon is a HOC. With react-chameleon you can parse image colors and apply them how you want.
React

Features:

Get colors from image;
Colorize content;

Alternative:

jquery.chameleon.js - Plugin for jQuery library.

Installation

Download directly from GitHub or install via npm.

npm i react-chameleon

Props

Name	Default	Description
img	null	Path to image. For example, "./my/image/path.png".
adaptFrontColorsToBack	false	Adapt the colors to the background color. The background color will be the first color after sorting, the other colors will adapt to it.
sortType	"count"	What color characteristic will be used for sorting. Allowed values: "count", "alpha".
sortDir	"desc"	Sorting direction. Allowed values: "desc", "asc".
colorsCount	undefined	The number of colors used. It is necessary to specify to optimize the process of adapting colors to the background color.
colorDifference	120	The minimum allowed difference in colors. For example, if we compare colors: rgb(0, 0, 0) and rgb(255, 255, 255), then "color_difference" of them is 765. Math.abs(0 - 255 + 0 - 255 + 0 - 255) = 765. Min: 3. Max: 765.
minColorAlpha	0	The minimum acceptable alpha-channel level of color. All colors whose level will be lower will be ignored. Min: 0. Max: 1.
colorAlphaPrecision	100	Precision of alpha-chanel value. For example, with a default value of 100, the precision will be 0.01. Min: 10. Max: 10000.

Props (Wrapped Component)

The following props will be added to the Wrapped Component:

Name	Default	Description
reactChameleonColors	undefined	An array of colors extracted from the image. Color is an object.

Color Structure

{
"r": 0, // red
"g": 120, // green
"b": 255, // blue
"alpha": 0.5, // alpha-channel
"count": 1000 // the number of pixels with this color in the image
}

Usage

1. Image colors

Examples of working with image colors.

1.1. Basic usage

Get image colors.

import React from 'react';
import ReactDOM from 'react-dom';
import Chameleon from 'react-chameleon';

const ColorsRenderer = function(props) {
    const {
        reactChameleonColors
    } = props;
    const getColor = c => `rgba(${c.r},${c.g},${c.b},${c.alpha})`;

    if (!reactChameleonColors) {
        return <p>Parse colors...</p>;
    }

    return <ul>
        {reactChameleonColors.map(color =>
            <li style={{
                paddingLeft: '10px',
                borderLeft: `15px solid ${getColor(color)}`,
                listStyleType: 'none'
            }}>
                <code>{JSON.stringify(color, null, 2)}</code>
            </li>
        )}
    </ul>;
};

const ChameleonColorsRenderer = Chameleon(ColorsRenderer);

ReactDOM.render(
    <ChameleonColorsRenderer
        img={./path/to/img.png}
        colorDifference={50}
    />,
    document.querySelector('body')
);

2. Colorize content

Examples on using extracted colors from an image to colorize the content.

2.1. Basic usage

Colorizing the content.

import React from 'react';
import ReactDOM from 'react-dom';
import Chameleon from 'react-chameleon';

const Text = props => {
    const {
        content,
        reactChameleonColors
    } = props;

    if (!reactChameleonColors) {
        return <p>Prepare content...</p>;
    }

    const defaultColors = {
        back: { r: 255, g: 255, b: 255, alpha: 1 },
        front: { r: 0, g: 0, b: 0, alpha: 1 }
    };
    const [
        backColor = defaultColors.back,
        frontColor = defaultColors.front
    ] = reactChameleonColors;
    const getColor = c => `rgba(${c.r},${c.g},${c.b},${c.alpha})`;

    return <p style={{
        backgroundColor: getColor(backColor),
        color: getColor(frontColor)
    }}>{content}</p>;
};

const ChameleonText = Chameleon(Text);

ReactDOM.render(
    <ChameleonText
        img={'./path/to/img.png'}
        adaptFrontColorsToBack={true}
        content={'React Chameleon Demo'}
    />,
    document.querySelector('.demoContainer')
);

2.2. Classic example

An example of how it all began. The example uses several images. Click "Run" button multiple times.

import React from 'react';
import ReactDOM from 'react-dom';
import Chameleon from 'react-chameleon';
import SomeContentPlaceholder from 'some-content-placeholder';
import someSoundtrackData from './path/to/some-soundtrack-data.json';

const Cover = props => {
    const { data, reactChameleonColors } = props;

    if (!reactChameleonColors) {
        return <SomeContentPlaceholder />;
    }

    const [
        backColor,
        titleColor,
        compositorColor,
        descriptionColor
    ] = reactChameleonColors.map(
        c => `rgba(${c.r},${c.g},${c.b},${c.alpha})`
    );

    return <div style={{ backgroundColor: backColor }}>
        <img src={data.img} alt={data.movie} />
        <h2 style={{ color: titleColor }}>{data.movie}</h2>
        <strong style={{ color: compositorColor }}>{data.compositor}</strong>
        <em style={{ color: compositorColor }}>{data.year}</em>
        <p style={{ color: descriptionColor }}>{data.description}</p>
    </div>;
};

const ChameleonCover = Chameleon(Cover);

ReactDOM.render(
    <ChameleonCover
        data={someSoundtrackData}
        img={someSoundtrackData.img}
        adaptFrontColorsToBack={true}
    />,
    document.querySelector('.demoContainer')
);