Nickelback Plays Music

    react-crop-component

    1.0.3 • Public • Published

    react-crop-component

    npm version npm download

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

    DEMO

    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

    Install

    npm i react-crop-component

    DownloadsWeekly Downloads

    5

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    49.5 kB

    Total Files

    17

    Last publish

    Collaborators

    • ozluy