@denisko28/react-media-editor NPM

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 your image sources. Package contains ImageEditor component.

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

Usage

Example using ImageEditor:

import React from 'react'
import Loader from "../LocalLoader/Loader";
import { ImageEditor } from '@denisko28/react-media-editor'
import Tools from '@denisko28/react-media-editor/src/painter/entities/Tools'

const Image = () => (
  <div className="page-wrapper editor">
    <div className="container">
      <ImageEditor 
        imgSrc={ExampleImage} 
        onSave={(e) => {console.log(e)}} 
        height={400}
        loader={<Loader/>}
      >
      {
        ({ undo, clear, save, setActiveTool, setActiveColor, setBrushSize }) => (
          <div>
            <button onClick={() => setActiveTool(Tools.Line)}>Line</button>
            <button onClick={() => setActiveTool(Tools.Arrow)}>Arrow</button>
            <button onClick={() => setActiveTool(Tools.Elipse)}>Elipse</button>
            <button onClick={() => setActiveTool(Tools.Rectangle)}>Rectangle</button>
            <button onClick={() => clear()}>Clear</button>
            <button onClick={() => undo()}>Undo</button>
            <button onClick={() => save()}>Save</button>
            <button onClick={() => setActiveColor("green")}>Set green brush</button>
            <button onClick={() => setBrushSize(30)}>Set brush size to 50</button>
          </div>
        )
      }
      </ImageEditor>
    </div>
  </div>
)

export default Image

Result: Imgur