You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+7-33Lines changed: 7 additions & 33 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,6 @@
1
1
# sveltekit-flash-message ⚡
2
2
3
-
**Version 2 has just been released. See the end of this document for a simple migration guide.**
4
-
5
-
This is a [Sveltekit](https://kit.svelte.dev/) library that passes temporary data to the next request, usually from [form actions](https://kit.svelte.dev/docs/form-actions) and [endpoints](https://kit.svelte.dev/docs/routing#server). It's useful when you want a success or failure message displayed after a POST, which should not always be displayed at the form, rather as a message on the page that the request was redirected to.
3
+
This is a [Sveltekit](https://kit.svelte.dev/) library that passes temporary data to the next request, usually from [form actions](https://kit.svelte.dev/docs/form-actions) and [endpoints](https://kit.svelte.dev/docs/routing#server). It's useful for displaying a success or failure message after a POST, which should not always be displayed at the form, rather as a message on the page that the request was redirected to.
6
4
7
5
Since it's a temporary message it's also known as a "flash message", especially known from PHP apps, since it's easy to add this functionality with PHP's built-in session handling. With SvelteKit it's a bit harder, but this library was made to alleviate that, encouraging well-behaved web apps that [Redirects after Post](https://www.theserverside.com/news/1365146/Redirect-After-Post).
8
6
@@ -16,9 +14,9 @@ npm i -D sveltekit-flash-message
16
14
pnpm i -D sveltekit-flash-message
17
15
```
18
16
19
-
## Configuration
17
+
## How to use
20
18
21
-
## 1. [Typescript only]Add the flash message to app.d.ts
19
+
###1. Add the flash message to app.d.ts (Typescript only)
22
20
23
21
In `src/app.d.ts`, add the type for the flash message to `App.PageData` as an optional property called `flash`. It can be as simple as a `string`, or something more advanced. It has to be serializable though, so only JSON-friendly data structures. Here's an example:
24
22
@@ -32,9 +30,9 @@ declare namespace App {
32
30
}
33
31
```
34
32
35
-
## 2. Wrap the load function of a top-level +layout or +page route
33
+
###2. Wrap the load function of a top-level +layout or +page route
36
34
37
-
If you're not using any [load functions](https://kit.svelte.dev/docs/load), this is a simple step. Create a `src/routes/+layout.server.ts` file (or `+page.server.ts`) with the following content:
35
+
If you're not using any [load functions](https://kit.svelte.dev/docs/load), this is a simple step. Create a `src/routes/+layout.server.ts` file with the following content:
Import `getFlash` in a layout or page component to display the flash message. `getFlash` will return a store that you'll use to access the message:
61
59
@@ -190,31 +188,7 @@ If you want to update the flash message on the client, use `getFlash` in any com
190
188
191
189
## Client-side fetching and redirecting
192
190
193
-
When using [enhance](https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance) or [fetch](https://kit.svelte.dev/docs/web-standards#fetch-apis), in certain cases you must use `updateFlash` afterwards:
194
-
195
-
### use:enhance
196
-
197
-
**NOTE: This is not required in v1.0 and up.**
198
-
199
-
```svelte
200
-
<script lang="ts">
201
-
import { updateFlash } from 'sveltekit-flash-message';
202
-
import { page } from '$app/stores';
203
-
</script>
204
-
205
-
<form
206
-
method="POST"
207
-
use:enhance={() =>
208
-
({ update }) =>
209
-
updateFlash(page, update)}
210
-
>
211
-
<button>Submit with enhanced form</button>
212
-
</form>
213
-
```
214
-
215
-
### Fetch
216
-
217
-
Since nothing on the page will update if you're using `fetch`, you must call `updateFlash` afterwards, **on all versions**:
191
+
In most cases the flash message will update automatically on redirect or navigation, with one exception: When using [fetch](https://kit.svelte.dev/docs/web-standards#fetch-apis), you must call `updateFlash` afterwards:
0 commit comments