https://github.com/MattMcFarland/react-darkroom

An HTML5 Image Editing Component built with ReactJS
https://github.com/MattMcFarland/react-darkroom

Last synced: 16 days ago
JSON representation

An HTML5 Image Editing Component built with ReactJS

• Host: GitHub
• URL: https://github.com/MattMcFarland/react-darkroom
• Owner: MattMcFarland
• License: mit
• Created: 2015-11-24T18:30:58.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-02-11T21:16:46.000Z (over 5 years ago)
• Last Synced: 2024-04-26T09:21:05.237Z (7 months ago)
• Language: JavaScript
• Homepage: http://blog.mmcfarland.net/react-darkroom/
• Size: 1.55 MB
• Stars: 124
• Watchers: 10
• Forks: 21
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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

```jsx

  

    Undo

  

  

    Redo

  

```

## Toolbar

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

```

  

  

  


    


    


  


```

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

```jsx

  

    

      

      

    

    

      

        

      

      

        

      

    

    

      

    

    

      

    

    

      

        

      

      

        

      

      

        

      

      

        

      

    

    

      

    

  

  

    

  

```

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