0.2.3 • Published 3 years ago
image-effects-react v0.2.3
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 ❌