Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cdrani/react-image-effects
:star: react component that adds effects to images
https://github.com/cdrani/react-image-effects
image-effects react
Last synced: 2 months ago
JSON representation
:star: react component that adds effects to images
- Host: GitHub
- URL: https://github.com/cdrani/react-image-effects
- Owner: cdrani
- License: mit
- Created: 2019-03-18T23:04:56.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-03T19:21:26.000Z (over 3 years ago)
- Last Synced: 2024-04-25T21:44:48.314Z (8 months ago)
- Topics: image-effects, react
- Language: JavaScript
- Homepage: https://react-image-effects.now.sh
- Size: 3.29 MB
- Stars: 6
- Watchers: 0
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- License: license
- Code of conduct: code_of_conduct.md
Awesome Lists containing this project
README
# react-image-effects
> A small, customizable react component that adds effects to images.
### Install
`npm i react-image-effects`
or
`yarn add react-image-effects`
### Usage
```js
import ImageEffect from 'react-image-effects'
const Example = () => (
Daytona
)
```
### Properties
| Prop | Type | Required | Default |
| :------- | :----- | :------- | :------ |
| `url` | string | yes | |
| `effect` | enum | no | 'none' | |
| `width` | string | no | '600px' | |
| `height` | string | no | '300px' |
### Effects
Please reference documentation site to visualize the effects.
- [x] airbrush
- [x] chalkboard
- [x] collage
- [x] colored-chalkboard
- [x] colored-pencil
- [x] emboss
- [x] flannel
- [x] hallucination
- [x] infrared
- [x] low-ink-h
- [x] low-ink-v
- [x] mirror-h
- [x] mirror-v
- [x] mosaic
- [x] night-vision
- [x] none
- [x] pencil
- [x] photo-border
- [x] selective-color
- [x] warhol
- [x] watercolor
### Documentation
See the effects via storybook:
[react-image-effects](https://react-image-effects.now.sh)
### Development
**server**
`yarn storybook`
or
`npm run storybook`
storybook server will be opened on [localhost:8000](localhost:8000)
**build**
`yarn storybook:build`
or
`npm run storybook:build`
### Contributing
PRs are welcome.
### License
MIT © | [@cdrani](https://github.com/cdrani)