Skip to content

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

Notifications You must be signed in to change notification settings

yosukapro/gl-react-color-matrix

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%