Problem with onDone property
herbertamaro2 opened this issue · comments
Amazing react component awesome, thanks so much, unfortunately the onDone doesn't work in here
`<ReactProfile src={file} modules={["filter", "crop"]} onDone={(editedImage) => handleEditedImage(editedImage)} />
const handleEditedImage = (exportObject) => {
const dataURL = exportObject.getDataURL();
console.log('newImageFromFeature', dataURL);
setNewImage(dataURL);
};`
Hi! How are you?
Do you have the entire component to check how you are using the library? What version are you using?
I tried to reproduce the error but without success. All working for me
Heey @mdjfs i'm good thanks !!
my code looks like this, neither the console.log in handleEditedImage is disparated.
`import React, { useState, useEffect } from 'react';
import ReactProfile, { ALL_FILTERS, EXPORT_OBJECT } from "react-profile";
import "react-profile/themes/default.min.css";
const ImageEditorComponent = ({ file, onChange }) => {
const [newImage, setNewImage] = useState(null);
useEffect(() => {
console.log('newImage', newImage)
onChange(newImage);
}, [newImage])
const handleEditedImage = (exportObject) => {
const dataURL = exportObject.getDataURL();
console.log('newImageFromFeature', dataURL);
setNewImage(dataURL);
};
return (
<ReactProfile
src={file}
modules={["filter", "crop"]}
onCancel={() => console.log('cancelou')}
onDone={(editedImage:EXPORT_OBJECT) => handleEditedImage(editedImage)}
language="es"
/>
);
};
export default ImageEditorComponent`
Hi. Tried to reproduce but all working. Here is my code:
Using react-profile@1.3.2
import ReactProfile from "react-profile";
import "react-profile/themes/default"
function App() {
const [dataURL, setDataURL] = useState()
const [file, setFile] = useState()
const handleEditedImage = (exportObject) => {
const dataURL = exportObject.getDataURL();
console.log('newImageFromFeature', dataURL);
setDataURL(dataURL)
setFile(null)
}
const change = async (e) => {
setFile(e.target.files[0])
}
if(file) {
return <ReactProfile src={file} modules={["filter", "crop"]} onDone={(editedImage) => handleEditedImage(editedImage)} language="es" />
}
return (
<div className="App">
<input type="file" accept="image/jpeg;image/png" onChange={change} />
<img src={dataURL} />
</div>
);
}
export default App;```
Thanks. I copied you code into that it's working now! Thanks !
I guess part of sintaxe code was incorrect.
thanks bro.. all working now!