rme
react-media-editor
npm i react-media-editor
rme

react-media-editor

React components library to edit Images and Video using canvas.

by Vlad Morzhanov

2.4.1 (see all)License:MITTypeScript:Not Found
npm i react-media-editor
Readme

React Media Editor

React components library to edit Images and Video using canvas.

npm version contributions welcome HitCount License: MIT

logo

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:

Demo

You can review how to use ImageEditor on codesandbox:

Edit 5349lln724

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

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.

Downloads/wk

20

GitHub Stars

18

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
2.4.1
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate