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 react-chameleon with all npm packages installed. Try it out:

require("react-dom/package.json"); // react-dom is a peer dependency. require("react/package.json"); // react is a peer dependency. require("prop-types/package.json"); // prop-types is a peer dependency. var reactChameleon = require("react-chameleon")

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

react-chameleon v1.1.0

Chameleon.js on React

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:

NameTypeRequiredDefaultDescription
imgStringYesnullPath to image. For example, './my/image/path.png'.
adaptFrontColorsToBackBooleanNofalseAdapt the colors to the background color. The background color will be the first color after sorting, the other colors will adapt to it.
sortTypeStringNo'count'What color characteristic will be used for sorting. Allowed values: "count", "alpha".
sortDirStringNo'desc'Sorting direction. Allowed values: "desc", "asc".
colorsCountNumberNoundefinedThe number of colors used. It is necessary to specify to optimize the process of adapting colors to the background color.
colorDifferenceNumberNo120The 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.
minColorAlphaNumberNo0The minimum acceptable alpha-channel level of color. All colors whose level will be lower will be ignored.
colorAlphaPrecisionNumberNo100Precision of alpha-chanel value. For example, with a default value of 100, the precision will be 0.01.

Demo:

For more information and examples check the demo page.

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