1import { Toaster, toast } from '@trymagic/toast'
2// ...
3function App() {
4  return (
5    <div>
6      <Toaster />
7      <button onClick={() => toast('My first toast')}>
8        Give me a toast
9      </button>
10    </div>
11  )
12}

1import { Toaster, toast } from "@trymagic/toast";
2​
3import { ThemeProvider, useTheme } from "magic-toast";
4// ...
5​
6const ChangeThemeButton = () => {
7  const { theme, setTheme } = useTheme();
8  const changeTheme = () => {
9    setTheme(theme == "dark" ? "light" : "dark");
10    toast("My first toast", {
11      action: {
12        text: "Change Theme",
13        onClick: () => setTheme(theme == "dark" ? "light" : "dark"),
14      },
15    });
16  };
17  return (
18    <>
19      <button onClick={changeTheme}>Change Theme</button>
20    </>
21  );
22};
23​
24function App() {
25  return (
26    <div>
27      <ThemeProvider>
28        <Toaster />
29        <ChangeThemeButton />
30      </ThemeProvider>
31    </div>
32  );
33}