image-effects-react

This is a library used to add instagram filters to your images There are a range of filters listed here to choose from. Filters Not enough? No problem. Feel free to customize each filter by their properties

Installation

npm i images-effects-react

Usage

For more information, check out this link. You can customize the filter by altering it's properties.

import { ImageContainer } from "image-effects-react"

    function addFilter() {
        return (
          <ImageContainer
            options={{
              filter: 'walden',
            }}
          >
            <img src='./image.png' alt="filter" />
          </ImageContainer>
        )
      }

Want to tweak these filters. Choose which properties for each filter you want to customize.

import { ImageContainer } from "image-effects-react"

      function addFilter() {
        return (
          <ImageContainer
            options={{
              filter: 'walden',
              hueRotate: '-20deg',
              contrast: '2',
              sepia: '0.5',
              saturate: '1'
            }}
          >
            <img src='./image.png' alt="filter" />
          </ImageContainer>
        )
      }

Available Properties

| Property | Description | Usage | | ---------------- | ----------------------------------------------------------------- | --------------------------- | | saturation | Adjusts the saturation of an image | saturation: '1.5' | | brightness | Adjusts the brightness of an image | brightness: '0.5' | | contrast | Adjusts the contrast of an image | contrast: '2' | | hue-rotate | Applies a hue rotation to the image in degrees | hueRotate: '-20deg' | | sepia | Adds sepia to an image | sepia: '0.05' | | grayscale | Converts the image to grayscale | grayscale: '0.8' | | backgroundBefore | Adjust the background of an image with the :before pseudo element | backgroundBefore: '#adadad' | | backgroundAfter | Adjust the background of an image with the :after pseudo element | backgroundAfter: '#cfcfcf' |

For more information on these properties, here are some helpful links on pseudo elements and filter properties

Compatibility

• Google Chrome 43+  ✅
• Mozilla Firefox 38+  ✅
• Safari 8+ ✅
• Opera 32+  ✅
• Internet Explorer ❌