My blog GitHub npm

React Image Filter

ImageFilter - React filter component.

Unfortunately CSS filters don't work in IE and Edge. This is React component that used SVG filters instead, and it works in all modern browsers plus IE10+ and Edge For props and presets check the detailed documentation on GitHub.

Demo

Change feColorMatrix values by using sliders.

Red to Red: 1.00
Green to Red: 0.00
Blue to Red: 0.00
Alpha to Red: 0.00
Add to Red: 0.00
Red to Green: 0.00
Green to Green: 1.00
Blue to Green: 0.00
Alpha to Green: 0.00
Add to Green: 0.00
Red to Blue: 0.00
Green to Blue: 0.00
Blue to Blue: 1.00
Alpha to Blue: 0.00
Add to Blue: 0.00
Red to Alpha: 0.00
Green to Alpha: 0.00
Blue to Alpha: 0.00
Alpha to Alpha: 1.00
Add to Alpha: 0.00

Presets

Misc

Please note that Unsplash will sometime return the same image.

Applied props

const filter = [
  1, 0, 0, 0, 0,
  0, 1, 0, 0, 0,
  0, 0, 1, 0, 0,
  0, 0, 0, 1, 0,
];
Images from Unsplash.