React-Duotone

Apply a duotone color effect to images in React. Renders via HTML5 Canvas and returns the result as a data URL.

Requirements

• React 15, 16, 17, or 18

Installation

npm install react-duotone

Usage

DuotoneImage component

The simplest way to use the library. Accepts all standard <img> attributes in addition to the props below.

import { DuotoneImage } from 'react-duotone';

function App() {
  return (
    <DuotoneImage
      src="photo.jpg"
      primaryColor="#FBFBFB"
      secondaryColor="#283B6B"
      alt="Duotone photo"
      width={800}
      height={600}
    />
  );
}

Props

Prop	Type	Required	Description
src	string	Yes	URL of the source image
primaryColor	string	Yes	Hex color for the highlight (light) tone, e.g. "#FBFBFB"
secondaryColor	string	Yes	Hex color for the shadow (dark) tone, e.g. "#283B6B"
...rest	React.ImgHTMLAttributes	—	All standard <img> attributes are forwarded

createDuotoneImage function

Low-level utility that applies the duotone effect to a loaded HTMLImageElement and returns a data URL.

import { createDuotoneImage } from 'react-duotone';

const img = new Image();
img.src = 'photo.jpg';
img.onload = () => {
  const dataUrl = createDuotoneImage(img, '#FBFBFB', '#283B6B');
  // use dataUrl as an <img src> or canvas source
};

Running examples locally

npm install
npm start

License

MIT © Florian Nagel