React Cutout

React Cutout is a simple component that allows you to create a nice title cutout effect by simply invoking the component. Try on codesandbox.io.

Installation

npm i react-ts-cutout

Example usage

import Cutout from "react-ts-cutout";

export default function myComponent() {
  return (
    <Cutout src="/image.jpg" backgroundColor="white">
      <h1>Nice titles</h1>
      <h2>Made simple</h2>
    </Cutout>
  );
}

Props

src: string

Source of the background image. Required

backgroundColor : 'white' | 'black' | string;

Color of the background. Required. Accepts any CSS color notation.

mode?: Property.MixBlendMode;

Blend mode CSS property. Defaults to 'darken' or 'lighten' depending on backgroundColor.