docs: add next.js & remix guide + update main getting-started guide

pheralb · Jul 9, 2024 · 4b77c29 · 4b77c29
1 parent fc85ed1
commit 4b77c29
Show file tree

Hide file tree

Showing 3 changed files with 168 additions and 10 deletions.
diff --git a/website/app/routes/_index.mdx b/website/app/routes/_index.mdx
@@ -38,7 +38,7 @@ import { ToastProvider } from '@pheralb/toast';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <ToastProvider position="bottom-right">
+    <ToastProvider>
       <App />
     </ToastProvider>
   </React.StrictMode>,

diff --git a/website/app/routes/nextjs.mdx b/website/app/routes/nextjs.mdx
@@ -7,19 +7,80 @@ export const meta = [
   },
 ];
 
-## Hello
+# Usage with Next.js
 
-```jsx
-import { useState } from 'react';
+How to use the library with [Next.js **/app** router](https://nextjs.org/docs) (also is compatible with **/pages** router).
 
-export default function Counter() {
-  const [count, setCount] = useState(0);
+1. Create a new Next.js project:
 
+```bash
+npx create-next-app@latest
+```
+
+2. Select the default options:
+
+```bash
+√ What is your project named? ... nextjs-project
+√ Would you like to use TypeScript? ... Yes
+√ Would you like to use ESLint? ... Yes
+√ Would you like to use Tailwind CSS? ... Yes (👈 optional)
+√ Would you like to use `src/` directory? ... Yes (👈 optional)
+√ Would you like to use App Router? (recommended) ... Yes
+√ Would you like to customize the default import alias (@/*)? ... No
+```
+
+3. Install the library:
+
+```bash
+npm install @pheralb/toast
+```
+
+4. Add the [`ToastProvider`](/provider) to the `layout.tsx` file:
+
+> 💡 By default, `ToastProvider` includes `use client` directive.
+
+```tsx
+// 📃 layout.tsx
+import { ToastProvider } from '@pheralb/toast';
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
   return (
-    <div>
-      <p>Count: {count}</p>
-      <button onClick={() => setCount(count + 1)}>Increment</button>
-    </div>
+    <html lang="en">
+      <body className={inter.className}>
+        <ToastProvider>{children}</ToastProvider>
+      </body>
+    </html>
   );
 }
 ```
+
+5. Use the [`useToast`](/useToast) hook in your **client** components:
+
+> 💡 To use the hook, import the `use client` directive.
+
+```tsx
+'use client';
+
+import { useToast } from '@pheralb/toast';
+
+export default function MyComponent() {
+  const toast = useToast();
+  return (
+    <button
+      onClick={() =>
+        toast.success({
+          text: 'Ready 🚀✨',
+        })
+      }
+    >
+      Click me!
+    </button>
+  );
+}
+```
+
+✨ Ready.
diff --git a/website/app/routes/remix.mdx b/website/app/routes/remix.mdx
@@ -0,0 +1,97 @@
+import { siteTitle } from '../globals.ts';
+
+export const meta = [
+  {
+    title: `Usage with Remix | ${siteTitle}`,
+    description: 'How to use @pheralb/toast library with Remix',
+  },
+];
+
+# Usage with Remix
+
+How to use the library with [Remix **v2** with Vite](https://remix.run/).
+
+1. Create a new Remix project:
+
+```bash
+npx create-remix@latest
+```
+
+2. Select the default options:
+
+```bash
+ remix   v2.x.x 💿 Let's build a better website...
+
+   dir   Where should we create your new project?
+         remix-project
+
+   git   Initialize a new git repository?
+         Yes
+
+  deps   Install dependencies with npm?
+         Yes
+
+  done   That's it!
+```
+
+3. Install the library:
+
+```bash
+npm install @pheralb/toast
+```
+
+4. Add the [`ToastProvider`](/provider) to the `root.tsx` file:
+
+```tsx
+// 📃 root.tsx
+import { ToastProvider } from '@pheralb/toast';
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <ToastProvider>{children}</ToastProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+```
+
+5. Use the [`useToast`](/useToast) hook in your components or pages:
+
+```tsx
+// 📃 index.tsx
+import { useToast } from '@pheralb/toast';
+
+export default function Index() {
+  const toast = useToast();
+  return (
+    <>
+      <h1>✨ Show a toast:</h1>
+      <button
+        onClick={() =>
+          toast.success({
+            text: 'Ready 🚀✨',
+          })
+        }
+      >
+        Show toast
+      </button>
+    </>
+  );
+}
+```
+
+✨ Ready.