react-crop-component
v1.0.3
Published
[![npm version](https://badge.fury.io/js/react-crop-component.svg)](https://badge.fury.io/js/react-crop-component) ![npm download](https://img.shields.io/npm/dt/react-crop-component.svg)
Downloads
6
Maintainers
Readme
react-crop-component
guide
- add your index html portal element
<div id='crop-portal'></div>
- use as below
//ComponentToBeCrop.js
const ComponentToBeCrop = () => (
<div
style={{
width: 250,
height: 250,
backgroundColor: '#ff44d9',
color: '#fff',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
Crop me if you can
</div>
)
// App.js
import React from 'react'
import ComponentToBeCrop from './ComponentToBeCrop'
import CropComponent from 'react-crop-component'
const MyApp = ()=> (
<>
<ComponentToBeCrop />
<CropComponent
portalId='crop-portal'
canvasConfigs={{
width: 250,
height: 250,
innerWidth: 250,
innerHeight: 250,
}}
Component={ComponentToBeCrop}
/>
</>)
export const MyApp
prop type
defaultValue
buttonGroupStyle object
{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}
modalStyle object
{
position: 'fixed',
left: 0,
top: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
bottom: 0,
right: 0,
background: 'rgba(49, 73, 177, 0.5)',
zIndex: 9999,
}
portalId string
canvas-portal
Component ReactElement
null
canvasConfigs object
null
imgStyle object
null
buttonStyle object
{
padding: 8,
margin: 8,
background: '#273CAF',
color: '#fff',
border: 'none',
outline: 'none',
}
filename string
'download.png'
downloadStyle object
{
padding: 8,
margin: 8,
background: '#36C2CE',
color: '#fff',
}
DownloadButton function
({ canvasElement, #### onClick }) => (
<a
onClick={onClick}
href={canvasElement && canvasElement.toDataURL()}
download={filename}
style={downloadStyle}
>
DOWNLOAD
</a>
)
CancelButton function
;({ onClick }) => (
<button style={buttonStyle} onClick={onClick}>
CANCEL
</button>
)
CropButton function
;({ onClick }) => (
<button style={buttonStyle} onClick={onClick}>
Crop Component
</button>
)
Contributors
Dependency html2canvas
This project was bootstrapped with Create React App.
Available Scripts
In the project directory, you can run:
npm start
development env
npm run build
production script
npm run npmbuild
creates node_module output file