Menu
React-Toastify
GitHub
React-Toastify
  • GitHub
  • Getting Started
    • Introduction
    • Installation
    • 🚀 Migrate to v9
    • Migrate to v8
    • Release notes
  • Usage
    • Positioning toast
    • Handling autoClose
    • Render more than string
    • Remove toast programmatically
    • Handling promise
    • Icons
    • Pause toast timer when the window loses focus
    • Use a custom id
    • Prevent duplicate
    • Delay notification appearance
    • Limit the number of toast displayed
    • Use a controlled progress bar
    • Update a toast
    • Define callback
    • Listen for changes
    • Use a custom close button or remove it
    • Add an undo action to a toast (like Google Drive)
    • Usage with redux
    • Replace the default transition
    • Define a custom enter and exit animation
    • Drag to remove
    • Enable right to left support
    • Accessibility
    • Multi containers
    • How to style
    • Dispatch toast outside of react component
  • Addons
    • useNotificationCenter
  • API Reference
    • ToastContainer
    • toast
    • cssTransition
    • collapseToast
    • useToastContainer
    • useToast

Use a custom id

A custom toastId can be used to replace the one generated. You can provide a number or a string.

import React from 'react';
import { toast } from 'react-toastify';
function Example(){
const notify = () => {
toast("I use a custom id", {
toastId: "customId"
});
}
return (
<div>
<button onClick={notify}>Notify</button>
</div>
);
}
Edit this page
Previous
« Pause toast timer when the window loses focus
Next
Prevent duplicate »
Copyright © 2022 Fadi Khadra