react-chameleon v2.0.0

React Chameleon

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

Install:

npm i react-chameleon

Use:

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

const Text = props => {
    const {
        content,
        reactChameleonColors = []
    } = props;
    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/image'}
        content={'React Chameleon Demo'}
    />,
    document.body
);

Props:

Demo:

For more information and examples check the demo page.