https://github.com/morzhanov/react-media-editor

React components library to edit Images and Video using canvas.
https://github.com/morzhanov/react-media-editor

editor library media npm react react-library screenshots

Last synced: about 3 hours ago
JSON representation

React components library to edit Images and Video using canvas.

• Host: GitHub
• URL: https://github.com/morzhanov/react-media-editor
• Owner: morzhanov
• License: mit
• Created: 2018-12-10T16:37:46.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-04-30T12:23:22.000Z (over 5 years ago)
• Last Synced: 2024-09-30T17:28:15.016Z (about 1 month ago)
• Topics: editor, library, media, npm, react, react-library, screenshots
• Language: JavaScript
• Homepage:
• Size: 18.2 MB
• Stars: 24
• Watchers: 2
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Media Editor

#### React components library to edit Images and Video using canvas.

[![npm version](https://badge.fury.io/js/react-media-editor.svg)](https://badge.fury.io/js/react-media-editor)

[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/morzhanov/react-media-editor/issues)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)



## 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:

[![Edit 5349lln724](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/5349lln724?view=preview)

## 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 = () => (

  


    


      

    

  

)


export default Video

```

Result: [Imgur](https://i.imgur.com/e3B8bRP.png)

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 = () => (

  


    


      

    

  

)


export default Image

```

Result: [Imgur](https://i.imgur.com/hER5fN8.png)

#### 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

 

...

```

### 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.