🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Lightweight React component, for applying color filters on images, works in all modern browsers plus IE10+ and Edge.

Image React

Documentation

React Image Filter

npm version npm downloads

Lightweight React component, for applying color filters on images, works in all modern browsers plus IE10+ and Edge. Made because CSS filters don't work in IE and Edge :(

Component is written as ES module, so it will work with webpack and other module bundlers (which is standard for React apps anyway). Tested with react-create-app and my boilerplate, Marvin.

Demo

Check the interactive demo.

Interactive demo

Quick start

Get it from npm

$ npm install --save react-image-filter 

Import and use it in your React app.

import React, { Component } from 'react'; import ImageFilter from 'react-image-filter';  class Example extends Component {   render() {     return (       <ImageFilter         image='https://source.unsplash.com/random/1200x800'         filter={ 'duotone' } // see docs beneath         colorOne={ [40, 250, 250] }         colorTwo={ [250, 150, 30] }       />     );   } }

Table of contents

Props

  • image string, required

    Your image (URL or base64 encoded)

  • filter string or array, required

    Color filter to be applied, passed to feColorMatrix.

    This is array of 20 numbers, example:

    [   0.3, 0.45, 0.1, 0, 0,   0.2, 0.45, 0.1, 0, 0,   0.1, 0.3, 0.1, 0, 0,   0, 0, 0, 1, 0, ];

    Following presets are available (strings):

    • duotone - if you selected duotone, you have to pass colorOne and colorTwo as well, check beneath
    • invert
    • grayscale
    • sepia

    If you have ideas for new presets, please open an issue titled Preset: <name of your preset>, so I can add it. Cheers!

  • colorOne array

    The first color for duotone filter, array of three numbers which are RED / GREEN / BLUE color values, example:

    [40, 50, 200]
  • colorTwo array

    The second color for duotone filter. Same as colorOne.

  • preserveAspectRatio string, default: 'none', required

    Aspect ratio string, passed to image's preserveAspectRatio.

    You can pass string cover to apply the same effect as CSS background-size: cover.

  • className string

    CSS class name (it will be applied along with ImageFilter class name).

  • style object

    CSS style to be applied on wrapper div. Please note that this will override style applied in component.

  • svgStyle object

    CSS style to be applied on the SVG element. Please note that this will override style applied in component.

  • svgProps object

    Other props to be passed to SVG, example:

    {   'aria-label': 'My awesome image',   tabIndex: -1, }
  • onChange function

    Callback to be called on filter change.

Browser support

Modern browsers and IE10+.

License

Released under MIT License.


You May Also Like