react-darkroom

by MattMcFarland

MattMcFarland / react-darkroom

An HTML5 Image Editing Component built with ReactJS

123 Stars 23 Forks Last release: Not found MIT License 88 Commits 3 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React-Darkroom component

See the live demo: http://blog.mmcfarland.net/react-darkroom/

Inspired by a jquery component called "Darkroom.JS" https://mattketmo.github.io/darkroomjs/

View example

Clone the github project first.

npm install && npm start

Usage

To use, install via npm first.

npm install react-darkroom --save

Clone the github project first.

npm install && npm start

Once installed, you can access the different parts of react-darkroom as follows:

import { Darkroom, Canvas, History, Toolbar, FilePicker, CropMenu } from 'react-darkroom';

react-darkroom was built using composition, so it can be modified more easily. However this increases the amount of steps necessary to render the component.

A simple example:

Each component that comes with react-darkroom has some settings you can modify:

Canvas

If

crop
is set to false, then it will not show the crop handles, set
crop
to true to enable cropping.

source
can either be file image or base64 data image.

angle
is set to determine rotation of the image.

width
and
height
are used to contrain proportions of an image to a specific rectangle

History

History component uses

step
and
length
to determine where user is in history, and looks for children with
action
prop
back
or
next
- it also uses the
ifEmpty
tag to
disable
or
hide
the button if user is at beginning or end of history.
  

Undo
Redo

Toolbar

The toolbar goes over each child node and wraps them in a menu ul li tag

  
  

translates to:


  

FilePicker

Filepicker can be used to upload files, but not needed, it is used in the kitchensink demo. ```jsx

## CropMenu

To add crop functionality, you can create a cropmenu, the buttons can be configured to showOnlyWhen a value of croppingIsOff or croppingIsOn. The CropMenu is entirely optional, and you can create your own composition for the crop menu if you choose.

```jsx

Example Component

  
    
      
      
    
    
      
        
      
      
        
      
    
    
      
    
    
      
    
    
      
        
      
      
        
      
      
        
      
      
        
      
    
    
      
    
  
  
    
  


State

Component state is managed by you, and each of the different sub-components that react-component comes with are considered "dumb" components, so you have to explicitly define and update each component.

Changelog

0.3

  • Remove gulp
  • Reduce Dependency amount
  • Update all dependencies to latest.
  • Implement CI system

0.2.0-2

  • Expose utils to components list
  • Update build pipeline to transpile es6 to es5
  • add example to cloud9 ide

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.