Examples

Common patterns and examples for using react-toast-msg.

Here are some common usage patterns for react-toast-msg.

Form Submission

Show a success or error toast based on form submission results.

tsx
1import { FormSyncForm } from "formsync";
2import { toast } from "react-toast-msg";
3
4export default function Example() {
5    return (
6        <main>
7            <FormSyncForm
8                formId="YOUR_FORM_ID"
9                onSuccess={(res) => toast.success(res.message)}
10                onSubmitError={(err) => toast.error(err.message)}
11            >
12                <input
13                    type="text"
14                    name="name"
15                    placeholder="Name"
16                    required
17                />
18                <button type="submit">
19                    Submit
20                </button>
21            </FormSyncForm>
22        </main>
23    );
24}

Promise Handling

Instead of managing states manually, you can use toast.promise to handle loading, success, and error outcomes with a single call.

tsx
1import { toast } from "react-toast-msg";
2
3const handlePromise = () => {
4    const myPromise = new Promise((resolve) => setTimeout(() => resolve("Success!"), 2000));
5
6    toast.promise(myPromise, {
7        loading: "Processing...",
8        success: (res) => res,
9        error: "Error occurred.",
10    });
11};

Custom Layouts

Since react-toast-msg is lightweight, you can use it alongside other UI components easily.

Check out the Playground for more interactive examples!

Last updated on March 20, 2026