rpp
@dsalvagni/react-profile-picture
npm i @dsalvagni/react-profile-picture
rpp

@dsalvagni/react-profile-picture

React version of dsalvagni/profile-picture

by Daniel Salvagni

1.0.1 (see all)License:MITTypeScript:Not Found
npm i @dsalvagni/react-profile-picture
Readme

Profile Picture (React Component)

Demo | jQuery Version

demo gif

Setup

The better option would be to add this component into your project by cloning this repository and building it yourself with the design changes that you might want to make.

⚠️ Breaking changes

Starting from version 1.0.0, use this package installing from NPM or Yarn.

yarn add @dsalvagni/react-profile-picture

Example

import React, { Component } from 'react';

import ProfilePicture from "@dsalvagni/react-profile-picture"
import "@dsalvagni/react-profile-picture/dist/ProfilePicture.css"

class App extends Component {
  constructor(props) {
    super(props)

    this.profilePictureRef = React.createRef();
  }

  handleUpload() {
    const PP = this.profilePicture.current;
    const imageData = PP.getData();
    const file = imageData.file;
    const imageAsDataURL = PP.getImageAsDataUrl();

    ...
    //add here the upload logic...
  }

  render() {
    return <ProfilePicture
      ref={this.profilePictureRef}
      useHelper={true}
      debug={true}
    />

    <button onClick={this.handleUpload.bind(this)}>Upload</button>
  }
}

Options

PropertyTypeDescription
imagePropTypes.stringSet an startup image
frameSizePropTypes.number.isRequiredSet the app editor preview size
frameFormatPropTypes.oneOf(["circle", "square", "rounded-square"])Set the app editor preview format
cropSizePropTypes.number.isRequiredSet the size of cropped image.
minZoomPropTypes.number.isRequiredMinimum zoom required.
maxZoomPropTypes.number.isRequiredMaximum zoom required.
minImageSizePropTypes.number.isRequiredMinimum image size desired.
maxImageSizePropTypes.number.isRequiredMaximum image size desired.
useHelperPropTypes.bool.isRequiredEnable/Disable the use of a background helper image.
debugPropTypes.bool.isRequiredEnable/Disable logging events on console
messagesPropTypes.objectCustom status messages

Status Messages

PropertyDefault ValueDescription
DEFAULTDrop your photo here or tap to select.Default states, when there's no phot selected
DRAGOVERDrop your photoWhen the user is dragging the photo over the component
INVALID_FILE_TYPEOnly images allowed.File different from image type
INVALID_IMAGE_SIZEYour photo must be larger than 350px.Invalid image size

Status Message Object Example

messages: {
  DEFAULT: "Drop your photo here or tap to select.",
  DRAGOVER: "Drop your photo",
  INVALID_FILE_TYPE: "Only images allowed.",
  INVALID_IMAGE_SIZE: "Your photo must be larger than 350px."
}

Callbacks

CallbackDescription
onImagePropertiesChangeTriggered always that any image property changes: Zoom, Position, etc.. Returns image data object.
onImageLoadingTriggered while the image is being processed.
onImageLoadedTriggered when the image processing is finished.
onImageRemovedTriggered when the user removes the image.
onErrorTriggered when something goes wrong. Returns an error code.
onZoomChangeTriggered when the image scale is changed.
onStatusChangeTriggered when the app status changes, e.g: empty, loaded, drag over, etc.

Methods

MethodParametersDescription
getImageAsDataUrlquality. Image quality from 0.1 to 1 where 1 is the max quality.Returns the image result as a Base64 image string. Use this if you want to use an image string to upload.
getDataReturns the image data. Use this to upload an image to be cropped by backend.
setImageimage url/FileSet a new image to app trough API.

Contributing

Contributions, issues and feature requests are very welcome. Please make sure to read the Contributing Guide before making a pull request.

Code of conduct

Find here our code of conduct.

Downloads/wk

377

GitHub Stars

25

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

1

OPEN PRs

3
VersionTagPublished
1.0.1
latest
1yr ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate