Skip to content

Commit 78b5f7f

Browse files
AlemTuzlakAlemTuzlak
authored
Merge pull request #47 from stevan-borus/rr-v7.8.0
rr v7.8.0
2 parents 9dfd7da + 954e6a3 commit 78b5f7f

9 files changed

Lines changed: 7762 additions & 7734 deletions

File tree

‎.eslintrc‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎README.md‎

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
# Remix Toast
2+
23
![GitHub Repo stars](https://img.shields.io/github/stars/forge-42/remix-toast?style=social)
34
![npm](https://img.shields.io/npm/v/remix-toast?style=plastic)
45
![GitHub](https://img.shields.io/github/license/forge-42/remix-toast?style=plastic)
5-
![npm](https://img.shields.io/npm/dy/remix-toast?style=plastic)
6-
![npm](https://img.shields.io/npm/dw/remix-toast?style=plastic)
6+
![npm](https://img.shields.io/npm/dy/remix-toast?style=plastic)
7+
![npm](https://img.shields.io/npm/dw/remix-toast?style=plastic)
78
![GitHub top language](https://img.shields.io/github/languages/top/forge-42/remix-toast?style=plastic)
8-
99

1010
<img src="./assets/mascott.png" alt="mascot" width="200" height="200" align="right" />
1111

@@ -20,6 +20,7 @@ library is server agnostic and should work with any server setup.
2020

2121
If you wish to read an in depth explanation of how this works you can find it here:
2222
https://alemtuzlak.hashnode.dev/handling-toasts-in-remix
23+
2324
## Installation
2425

2526
```bash
@@ -38,7 +39,7 @@ If you are using react-router v7 you can use v2.0.0 of this library. The only th
3839
- import { jsonWithSuccess } from "remix-toast";
3940
+ import { dataWithSuccess } from "remix-toast";
4041

41-
export const action = () => {
42+
export const action = () => {
4243
- return jsonWithSuccess({ result: "Data saved successfully" }, "Operation successful! 🎉");
4344
+ return dataWithSuccess({ result: "Data saved successfully" }, "Operation successful! 🎉");
4445
};
@@ -55,19 +56,19 @@ import { getToast, setToast, unstable_toastMiddleware } from "remix-toast/middle
5556

5657
export const loader = async ({ request, context }: Route.LoaderArgs) => {
5758
// Extracts the toast from the request
58-
const toast = getToast(context);
59+
const toast = getToast(context);
5960
// pass it to the client side
6061
return { toast }
6162
}
6263

6364
export const action = async ({ request, context }: Route.ActionArgs) => {
64-
setToast(context, { message: "hello toast!", type: "success" });
65+
setToast(context, { message: "hello toast!", type: "success" });
6566
return null
6667
}
6768

6869
export default function App({ loaderData }: Route.ComponentArgs) {
6970
const { toast } = loaderData
70-
71+
7172
useEffect(() => {
7273
if(toast){
7374
// Call your toast function here
@@ -85,7 +86,6 @@ export const unstable_middleware = [unstable_toastMiddleware()];
8586

8687
```
8788

88-
8989
### Server-side
9090

9191
In order to be able to show toasts anywhere in the app you need to add the following code to your `root.tsx` file.
@@ -102,7 +102,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
102102

103103
export default function App({ children }: { children: ReactNode }) {
104104
const { toast } = useLoaderData<typeof loader>();
105-
105+
106106
useEffect(() => {
107107
if(toast){
108108
// Call your toast function here
@@ -115,6 +115,7 @@ export default function App({ children }: { children: ReactNode }) {
115115
);
116116
}
117117
```
118+
118119
### Client-side
119120

120121
After this you can then use any toast notification library you prefer, but here are some examples:
@@ -149,9 +150,7 @@ export default function App() {
149150

150151
return (
151152
<html lang="en">
152-
<head>
153-
...
154-
</head>
153+
<head>...</head>
155154
<body>
156155
...
157156
{/* Add the toast container */}
@@ -162,7 +161,7 @@ export default function App() {
162161
}
163162
```
164163

165-
![react-toastify](./assets/react-toastify.gif)
164+
![react-toastify](./assets/react-toastify.gif)
166165

167166
#### Sonner
168167

@@ -204,7 +203,7 @@ export default function App() {
204203
}
205204
```
206205

207-
![react-toastify](./assets/sonner.gif)
206+
![react-toastify](./assets/sonner.gif)
208207

209208
## Overriding cookie options
210209

@@ -213,11 +212,8 @@ You can override the default cookie options by passing in your own options via t
213212
```tsx
214213
import { setToastCookieOptions } from "remix-toast";
215214

216-
setToastCookieOptions({
217-
secrets:
218-
process.env.NODE_ENV === "production"
219-
? [process.env.SESSION_SECRET]
220-
: ["secret"]
215+
setToastCookieOptions({
216+
secrets: process.env.NODE_ENV === "production" ? [process.env.SESSION_SECRET] : ["secret"],
221217
});
222218
```
223219

@@ -238,15 +234,15 @@ const session = createCookieSessionStorage({
238234

239235
export const {
240236
getToast,
241-
redirectWithToast,
242-
redirectWithSuccess,
243-
redirectWithError,
244-
redirectWithInfo,
245-
redirectWithWarning,
246-
dataWithSuccess,
247-
dataWithError,
248-
dataWithInfo,
249-
dataWithWarning
237+
redirectWithToast,
238+
redirectWithSuccess,
239+
redirectWithError,
240+
redirectWithInfo,
241+
redirectWithWarning,
242+
dataWithSuccess,
243+
dataWithError,
244+
dataWithInfo,
245+
dataWithWarning,
250246
} = createToastUtilsWithCustomSession(session);
251247
```
252248

@@ -256,8 +252,6 @@ export const {
256252

257253
If you want to use `throw` with any of the `redirectWith...` utilities you need to `await` the function call. This is because `redirectWith...` utilities have to generate a cookie and set it on the headers and if that is not awaited the headers won't be set properly and the redirect won't work.
258254

259-
260-
261255
### redirectWithToast
262256

263257
General function that allows you to redirect to a new route and show a toast message.
@@ -266,9 +260,12 @@ General function that allows you to redirect to a new route and show a toast mes
266260
import { redirectWithToast } from "remix-toast";
267261

268262
export const action = () => {
269-
return redirectWithToast("/login", { message: "You need to login to access this page", description: "description of toast", type: "error" });
270-
}
271-
263+
return redirectWithToast("/login", {
264+
message: "You need to login to access this page",
265+
description: "description of toast",
266+
type: "error",
267+
});
268+
};
272269
```
273270

274271
### redirectWithSuccess
@@ -279,11 +276,10 @@ Redirects to a new route and shows a success toast message.
279276
import { redirectWithSuccess } from "remix-toast";
280277

281278
export const action = () => {
282-
return redirectWithSuccess("/login", "You are logged in!");
279+
return redirectWithSuccess("/login", "You are logged in!");
283280
//or with description and message (works for all the other utilities as well)
284281
return redirectWithSuccess("/login", { message: "You are logged in!", description: "description of toast" });
285-
}
286-
282+
};
287283
```
288284

289285
### redirectWithError
@@ -295,8 +291,7 @@ import { redirectWithError } from "remix-toast";
295291

296292
export const action = () => {
297293
return redirectWithError("/login", "You need to login to access this page");
298-
}
299-
294+
};
300295
```
301296

302297
### redirectWithInfo
@@ -332,8 +327,11 @@ import { dataWithSuccess } from "remix-toast";
332327

333328
export const action = () => {
334329
return dataWithSuccess({ result: "Data saved successfully" }, "Operation successful! 🎉");
335-
//or with description and message (works for all the other utilities as well)
336-
return dataWithSuccess({ result: "Data saved successfully" }, { message: "Operation successful! 🎉", description: "description of toast" });
330+
//or with description and message (works for all the other utilities as well)
331+
return dataWithSuccess(
332+
{ result: "Data saved successfully" },
333+
{ message: "Operation successful! 🎉", description: "description of toast" },
334+
);
337335
};
338336
```
339337

‎eslint.config.mjs‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { defineConfig } from "eslint/config";
2+
import eslint from "@eslint/js";
3+
import typescriptEslint from "@typescript-eslint/eslint-plugin";
4+
import tsParser from "@typescript-eslint/parser";
5+
import react from "eslint-plugin-react";
6+
7+
export default defineConfig([
8+
// Global ignores
9+
{
10+
ignores: ["node_modules/", "test-apps/"],
11+
},
12+
13+
// Base ESLint recommended rules
14+
eslint.configs.recommended,
15+
16+
// TypeScript rules
17+
{
18+
files: ["**/*.{ts,tsx}"],
19+
languageOptions: {
20+
parser: tsParser,
21+
parserOptions: {
22+
ecmaVersion: "latest",
23+
sourceType: "module",
24+
project: "./tsconfig.json",
25+
},
26+
},
27+
plugins: {
28+
"@typescript-eslint": typescriptEslint,
29+
},
30+
rules: {
31+
...typescriptEslint.configs.recommended.rules,
32+
"@typescript-eslint/no-unnecessary-type-constraint": "off",
33+
"@typescript-eslint/no-explicit-any": "off",
34+
},
35+
},
36+
37+
// React rules
38+
{
39+
files: ["**/*.{js,jsx,ts,tsx}"],
40+
languageOptions: {
41+
parserOptions: {
42+
ecmaFeatures: {
43+
jsx: true,
44+
},
45+
},
46+
},
47+
plugins: {
48+
react,
49+
},
50+
rules: {
51+
...react.configs.recommended.rules,
52+
},
53+
settings: {
54+
react: {
55+
version: "detect",
56+
},
57+
},
58+
},
59+
]);

0 commit comments

Comments
 (0)