📢Notify

To add a notification in your project, you can use the toast function from the Sonner library.

1. Import The Toast Function

First, import the toast function from Sonner:

import notify from 'src/_components/notify'

---

2. Use The Notify Function

Now, you can easily call the notify function with the type of notification you want. Here are the available options:

• notify.success ✔️

• notify.info ℹ️

• notify.warning ⚠️

• notify.error ❌

Here’s an example of how to trigger a success message when a button is clicked:

<button onClick={() => notify.success('test')}>
  Click me!!
</button>

---

3. Rich Colors For Notifications🌈

The project is set to use richColors for notifications, meaning each message will have a color matching its type. If you prefer black and white messages, you can disable this feature.

To disable richColors, go to src/main.tsx and remove richColors from the Toaster component:

<Toaster richColors />

Simply remove richColors to go back to the default black-and-white styling.

---

toast.success message with richColors enabled

---

toast.success message with richColors disabled

Notify On Navigation

If you want to show an notify when the user is redirected to a new page you can just use the notify function because the notfiy function uses Toast from Sonner and the htmx component is rendered outside the React Router

---

Translation

The notify function does not directly output the string you provide. Instead, it retrieves a corresponding string from a JSON file.

// locales/en.json
{
 "test": "this is a test message",
 "dashboard": {
  "test": "also a test message"
 }
}

//example
notify.success("test")

---

Parameters

You can customize the notification parameters to display a personalized message for each user, such as including their name.

// locales/en.json
{
 "welcome": "Hello {{name}}",
}

//example
notify.success("welcome", { name: 'Mike' })