gl-react-color-matrix

Universal gl-react effect to apply 4x4 rgba color matrix on a content

Usage no npm install needed!

<script type="module">
  import glReactColorMatrix from 'https://cdn.skypack.dev/gl-react-color-matrix';
</script>

README

gl-react-color-matrix ![](https://img.shields.io/badge/gl--react->= 2.1-05F561.svg)

Universal gl-react color-matrix effect

Props

  • children (required): the content to color-matrix.
  • matrix (required): an array of 16 numbers that represents a 4x4 color matrix (rgba x rgba).

Usage Examples

var ColorMatrix = require("gl-react-color-matrix").ColorMatrix;
// or
import {ColorMatrix} from "gl-react-color-matrix";

Identity

<ColorMatrix matrix={[
  1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0,
  0, 0, 0, 1
]}>
  ...
</ColorMatrix>

Let only RED through

<ColorMatrix matrix={[
  1, 0, 0, 0,
  0, 0, 0, 0,
  0, 0, 0, 0,
  0, 0, 0, 1
]}>
  ...
</ColorMatrix>

Grayscale (approximative)

<ColorMatrix matrix={[
  .3, .3, .3, 0,
  .6, .6, .6, 0,
  .1, .1, .1, 0,
   0,  0,  0, 1
]}>
  ...
</ColorMatrix>