Skip to content

Commit e3791e6

Browse files
committed
Merge branch 'master' of github.com:ciscoheat/sveltekit-flash-message
2 parents cdb83da + 662156f commit e3791e6

File tree

1 file changed

+7
-33
lines changed

1 file changed

+7
-33
lines changed

README.md

Lines changed: 7 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
# sveltekit-flash-message ⚡
22

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.
64

75
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).
86

@@ -16,9 +14,9 @@ npm i -D sveltekit-flash-message
1614
pnpm i -D sveltekit-flash-message
1715
```
1816

19-
## Configuration
17+
## How to use
2018

21-
## 1. [Typescript only] Add the flash message to app.d.ts
19+
### 1. Add the flash message to app.d.ts (Typescript only)
2220

2321
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:
2422

@@ -32,9 +30,9 @@ declare namespace App {
3230
}
3331
```
3432

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
3634

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:
3836

3937
**src/routes/+layout.server.ts**
4038

@@ -55,7 +53,7 @@ export const load = loadFlash(async (event) => {
5553
});
5654
```
5755

58-
## 3. Display the flash message
56+
### 3. Display the flash message
5957

6058
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:
6159

@@ -190,31 +188,7 @@ If you want to update the flash message on the client, use `getFlash` in any com
190188

191189
## Client-side fetching and redirecting
192190

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:
218192

219193
```svelte
220194
<script lang="ts">

0 commit comments

Comments
 (0)