This content originally appeared on DEV Community and was authored by taiseen
At development time code context/pattern is going to different for project to project... so bellow coding pattern is one of them...
Custom button component call inside "react-toastify"
import ApiCancelBtn from '../components/ApiCancelBtn';
import { toast } from 'react-toastify';
export class Service {
...
async handleApiCall(callAI) {
...
toast.info(`🙂 We are thinking...`, {
icon: false,
autoClose: 30000,
pauseOnHover: false,
// custom button component call...
closeButton: <ApiCancelBtn jobId={'jobId'} />,
});
...
}
...
}
import api from '../api';
const ApiCancelBtn = ({ jobId }) => {
const handleCancel = async (jobId) => {
await api.cancelJob(jobId);
};
return (
<button
className="toast-custom-cancel-button"
onClick={()=> handleCancel(jobId)}
>
Cancel API Call
</button>
);
};
export default ApiCancelBtn;
This content originally appeared on DEV Community and was authored by taiseen
taiseen | Sciencx (2023-03-16T21:02:14+00:00) custom cancel button call inside react-toastify. Retrieved from https://www.scien.cx/2023/03/16/custom-cancel-button-call-inside-react-toastify/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.