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}

Loading States (Manual)

While the library doesn't have a built-in promise handler yet, you can easily simulate it:

tsx
1const handlePromise = async () => {
2    // Show a default info toast
3    toast("Processing...");
4  
5    const result = await myPromise();
6  
7    if (result.success) {
8        toast.success("Completed!");
9    } else {
10        toast.error("Error occurred.");
11    }
12};

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 February 17, 2026