Skip to content

Commit 4b77c29

Browse files
pheralbpheralb
committed
docs: add next.js & remix guide + update main getting-started guide
1 parent fc85ed1 commit 4b77c29

File tree

3 files changed

+168
-10
lines changed

3 files changed

+168
-10
lines changed

‎website/app/routes/_index.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import { ToastProvider } from '@pheralb/toast';
3838

3939
ReactDOM.createRoot(document.getElementById('root')!).render(
4040
<React.StrictMode>
41-
<ToastProvider position="bottom-right">
41+
<ToastProvider>
4242
<App />
4343
</ToastProvider>
4444
</React.StrictMode>,

‎website/app/routes/nextjs.mdx

+70-9
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,80 @@ export const meta = [
77
},
88
];
99

10-
## Hello
10+
# Usage with Next.js
1111

12-
```jsx
13-
import { useState } from 'react';
12+
How to use the library with [Next.js **/app** router](https://nextjs.org/docs) (also is compatible with **/pages** router).
1413

15-
export default function Counter() {
16-
const [count, setCount] = useState(0);
14+
1. Create a new Next.js project:
1715

16+
```bash
17+
npx create-next-app@latest
18+
```
19+
20+
2. Select the default options:
21+
22+
```bash
23+
√ What is your project named? ... nextjs-project
24+
√ Would you like to use TypeScript? ... Yes
25+
√ Would you like to use ESLint? ... Yes
26+
√ Would you like to use Tailwind CSS? ... Yes (👈 optional)
27+
√ Would you like to use `src/` directory? ... Yes (👈 optional)
28+
√ Would you like to use App Router? (recommended) ... Yes
29+
√ Would you like to customize the default import alias (@/*)? ... No
30+
```
31+
32+
3. Install the library:
33+
34+
```bash
35+
npm install @pheralb/toast
36+
```
37+
38+
4. Add the [`ToastProvider`](/provider) to the `layout.tsx` file:
39+
40+
> 💡 By default, `ToastProvider` includes `use client` directive.
41+
42+
```tsx
43+
// 📃 layout.tsx
44+
import { ToastProvider } from '@pheralb/toast';
45+
46+
export default function RootLayout({
47+
children,
48+
}: Readonly<{
49+
children: React.ReactNode;
50+
}>) {
1851
return (
19-
<div>
20-
<p>Count: {count}</p>
21-
<button onClick={() => setCount(count + 1)}>Increment</button>
22-
</div>
52+
<html lang="en">
53+
<body className={inter.className}>
54+
<ToastProvider>{children}</ToastProvider>
55+
</body>
56+
</html>
2357
);
2458
}
2559
```
60+
61+
5. Use the [`useToast`](/useToast) hook in your **client** components:
62+
63+
> 💡 To use the hook, import the `use client` directive.
64+
65+
```tsx
66+
'use client';
67+
68+
import { useToast } from '@pheralb/toast';
69+
70+
export default function MyComponent() {
71+
const toast = useToast();
72+
return (
73+
<button
74+
onClick={() =>
75+
toast.success({
76+
text: 'Ready 🚀✨',
77+
})
78+
}
79+
>
80+
Click me!
81+
</button>
82+
);
83+
}
84+
```
85+
86+
✨ Ready.

‎website/app/routes/remix.mdx

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { siteTitle } from '../globals.ts';
2+
3+
export const meta = [
4+
{
5+
title: `Usage with Remix | ${siteTitle}`,
6+
description: 'How to use @pheralb/toast library with Remix',
7+
},
8+
];
9+
10+
# Usage with Remix
11+
12+
How to use the library with [Remix **v2** with Vite](https://remix.run/).
13+
14+
1. Create a new Remix project:
15+
16+
```bash
17+
npx create-remix@latest
18+
```
19+
20+
2. Select the default options:
21+
22+
```bash
23+
remix v2.x.x 💿 Let's build a better website...
24+
25+
dir Where should we create your new project?
26+
remix-project
27+
28+
git Initialize a new git repository?
29+
Yes
30+
31+
deps Install dependencies with npm?
32+
Yes
33+
34+
done That's it!
35+
```
36+
37+
3. Install the library:
38+
39+
```bash
40+
npm install @pheralb/toast
41+
```
42+
43+
4. Add the [`ToastProvider`](/provider) to the `root.tsx` file:
44+
45+
```tsx
46+
// 📃 root.tsx
47+
import { ToastProvider } from '@pheralb/toast';
48+
49+
export function Layout({ children }: { children: React.ReactNode }) {
50+
return (
51+
<html lang="en">
52+
<head>
53+
<meta charSet="utf-8" />
54+
<meta name="viewport" content="width=device-width, initial-scale=1" />
55+
<Meta />
56+
<Links />
57+
</head>
58+
<body>
59+
<ToastProvider>{children}</ToastProvider>
60+
<ScrollRestoration />
61+
<Scripts />
62+
</body>
63+
</html>
64+
);
65+
}
66+
67+
export default function App() {
68+
return <Outlet />;
69+
}
70+
```
71+
72+
5. Use the [`useToast`](/useToast) hook in your components or pages:
73+
74+
```tsx
75+
// 📃 index.tsx
76+
import { useToast } from '@pheralb/toast';
77+
78+
export default function Index() {
79+
const toast = useToast();
80+
return (
81+
<>
82+
<h1>✨ Show a toast:</h1>
83+
<button
84+
onClick={() =>
85+
toast.success({
86+
text: 'Ready 🚀✨',
87+
})
88+
}
89+
>
90+
Show toast
91+
</button>
92+
</>
93+
);
94+
}
95+
```
96+
97+
✨ Ready.

0 commit comments

Comments
 (0)