React Media Editor

React components library to edit Images and Video using canvas.

Description

Use this library to add image/video editor to you React application.

This library contains drawing tools which you can use to draw graphical shapes on you image or video sources. Package contains ImageEditor and VideoEditor components.

Installation

NPM package:

yarn i react-media-editor

Also you can modify project files directly, project built using RollupJS module bundler.

Example

To run example:

• go to /example folder
• yarn i
• yarn start
• open localhost:3000

Demo

You can review how to use ImageEditor on codesandbox:

Usage

Here is an example how to use VideoEditor compoent within you application:

import React from 'react'
import { SketchPicker } from 'react-color'
import { VideoEditor } from 'react-media-editor'

const Video = () => (
  <div className="page-wrapper editor">
    <div className="container">
      <VideoEditor
        colorPicker={SketchPicker}
        src="https://your.video.mp4"
      />
    </div>
  </div>
)

export default Video

Result: Imgur

Example using ImageEditor:

import React from 'react'
import { SketchPicker } from 'react-color'
import { ImageEditor } from 'react-media-editor'
import ExampleImage from '../assets/img/example.png'

const Image = () => (
  <div className="page-wrapper editor">
    <div className="container">
      <ImageEditor colorPicker={SketchPicker} src={ExampleImage} />
    </div>
  </div>
)

export default Image

Result: Imgur

Notice

If you want to enable color change feature you should add react-color package to your project, and then pass it's component as colorPainter prop to Editor. Example:

...
import { SketchPicker } from 'react-color' // we will use SketchPicker
...

// somwhere in the React render() method
 <VideoEditor
   colorPicker={SketchPicker}
   src="https://your.video.mp4"
 />
...

ImageEditor and VideoEditor props

colorPicker - react-color component to enable color pick feature.

src - image or video source.

Main Technologies and libraries

• React
• react-color
• Rollup.JS
• Webpack 4
• ESLint
• Prettier
• Babel

More

If you would like to add comments to audio files please take a look on react-audio-comments library.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

Vlad Morzhanov

License

(The MIT License)

Copyright (c) 2018 Vlad Morzhanov. You can review license in the LICENSE file.