@heffayxd/react-picture-crop

0.1.6 • Public • Published

react-picture-crop

React component for cropping pictures.

Usage

import React from 'react'
import PictureCrop from '@heffayxd/react-picture-crop'

const App = () => {
  return (
    <div id='app'>
      <PictureCrop slider />
    </div>
  )
}

export default App

Props

onSubmit

<PictureCrop onSubmit={base64 => { console.log(base64) }} />

Function that is passed when the "submit" button is pressed. It receives the base64 string of the canvas result.

slider

<PictureCrop slider />

Add the prop "slider" to enable the magnification slider (disabled by default)

dimensions

<PictureCrop dimensions={{ width: 200, height: 200 }} />

Use the "dimensions" prop to pass the target resolution in pixels (default is 200x200)

noStyles

<PictureCrop noStyles />

Add the prop "noStyles" to disable all default CSS styles (enabled by default)

label

<PictureCrop label='Choose file' />

Adding this prop will add a label for the "Choose file" input. You can use this for custom styling your own "Choose file" input (disabled by default)

Readme

Keywords

none

Package Sidebar

Install

npm i @heffayxd/react-picture-crop

Weekly Downloads

17

Version

0.1.6

License

MIT

Unpacked Size

33.4 kB

Total Files

17

Last publish

Collaborators

  • heffayxd