Package Exports

@daym3l/react-profile-image

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@daym3l/react-profile-image) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Profile Photo Upload with React js

See the Example Profile image

Profile Photo Upload is a React Js component for upload or take photo

Features of react-profile-image

upload image
take a photo whit the webcam
get the Base64 of the image

Getting started

npm i @daym3l/react-profile-image

Example

Need more? See sample/src/index.js

import ProfileImage from "react-profile-image";

export default () => {
    const getImages = (base64Image, fileImage) => {
        // Do something with the selected image)
        console.log(base64Image);
        console.log(fileImage);
    };

    return (
        <ProfileImage
            camera
            returnImage={getImages}
            uploadBtnProps={{ variant: "contained", label: "Up" }}
        />
    );
};

Props

styles: React style object for the img tag.(default:{ height: 200, width: 200, backgorundColor: '#fff'),
camera: bool if you want take photos,
defaultImage: default image for the component,
returnImage: (required) Callback function that recieves the image in base64 format as first parameter and file format as second parameter,
uploadBtnProps: Object of type ButtonProps of material-ui, and "label" property to change the button text. IMPORTANT: "onClick" event will not work here,
cameraBtnProps: Object of type ButtonProps of material-ui, and "label" property to change the button text. IMPORTANT: "onClick" event will not work here,
cancelBtnProps: Object of type ButtonProps of material-ui, and "label" property to change the button text. IMPORTANT: "onClick" event will not work here,
takeBtnProps: Object of type ButtonProps of material-ui, and "label" property to change the button text. IMPORTANT: "onClick" event will not work here,
maxImgSize: Max image size in bytes. (number),
sizeErrorMsg: Error message to display when the image size is exceeded,
isNotImgErrorMsg: Error message to display when the selected file to upload is not a image,
clearPreview: Boolean prop. If it's true the preview is going to have the default image. Default to false.

Build the example locally

git clone https://github.com/Daym3l/react-profile-image.git
cd react-profile-image
npm install
npm start

Then open localhost:3001 in a browser.

License

MIT