Skip to content

Commit 7df2ba6

Browse files
authored
Merge pull request #137 from hotwired-laravel/refresh-method-and-scroll-components
Adds a `<x-turbo::refresh-method />` and `<x-turbo::refresh-scroll />` components
2 parents 235e89c + 0cd0721 commit 7df2ba6

File tree

4 files changed

+47
-9
lines changed

4 files changed

+47
-9
lines changed

docs/helpers.md

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ If you're rendering a Turbo Stream inside a your Blade files, you may use the `<
6060

6161
Just like in the Turbo Frames' `:id` prop, the `:target` prop of the Turbo Stream component accepts a string, a model instance, or an array to resolve the DOM ID using the `dom_id()` function.
6262

63-
### The `<x-turbo::refreshes-with>` Blade Component
63+
### The `<x-turbo::refresh-method method="morph" />` Blade Component
6464

6565
We can configure which update method Turbo should so to update the document:
6666

@@ -69,14 +69,42 @@ We can configure which update method Turbo should so to update the document:
6969
| `replace` | Updates the entire body of the document on Turbo Visits |
7070
| `morph` | Uses DOM morphing to update the document instead of replacing everything |
7171

72+
Here's how you can use it:
73+
74+
```blade
75+
<x-turbo::refresh-method method="morph" />
76+
```
77+
78+
The output would be:
79+
80+
```blade
81+
<meta name="turbo-refresh-method" content="morph">
82+
```
83+
84+
### The `<x-turbo::refresh-scroll scroll="preserve" />` Blade Component
85+
7286
You can also configure the scroll behavior on Turbo:
7387

7488
| Behavior | Description |
7589
|---|---|
7690
| `reset` | Resets the scroll position to the top, mimicking for the browser handles new page visits |
7791
| `preserve` | Preserves the current scroll position (usually results in a better UX when used with the `morph` method) |
7892

79-
You may use the `<x-turbo::refreshes-with />` component in your main layout's `<head>` tag or on specific pages to configure how Turbo should update the page. Here's an example:
93+
Here's how you can use it:
94+
95+
```blade
96+
<x-turbo::refresh-scroll scroll="preserve" />
97+
```
98+
99+
The output would be:
100+
101+
```blade
102+
<meta name="turbo-refresh-scroll" content="preserve">
103+
```
104+
105+
### The `<x-turbo::refreshes-with>` Blade Component
106+
107+
You may configure both the refresh method and scroll behavior using the `<x-turbo::refreshes-with />` component in your main layout's `<head>` tag or on specific pages to configure how Turbo should update the page. Here's an example:
80108

81109
```blade
82110
<x-turbo::refreshes-with method="morph" scroll="preserve" />
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@props(['method' => 'replace'])
2+
3+
@php
4+
throw_unless(in_array($method, ['replace', 'morph']), HotwiredLaravel\TurboLaravel\Exceptions\PageRefreshStrategyException::invalidRefreshMethod($method));
5+
@endphp
6+
7+
<meta name="turbo-refresh-method" content="{{ $method }}">
8+
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@props(['scroll' => 'reset'])
2+
3+
@php
4+
throw_unless(in_array($scroll, ['reset', 'preserve']), HotwiredLaravel\TurboLaravel\Exceptions\PageRefreshStrategyException::invalidRefreshScroll($scroll));
5+
@endphp
6+
7+
<meta name="turbo-refresh-scroll" content="{{ $scroll }}">
Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
11
@props(['method' => 'replace', 'scroll' => 'reset'])
22

3-
@php
4-
throw_unless(in_array($method, ['replace', 'morph']), HotwiredLaravel\TurboLaravel\Exceptions\PageRefreshStrategyException::invalidRefreshMethod($method));
5-
throw_unless(in_array($scroll, ['reset', 'preserve']), HotwiredLaravel\TurboLaravel\Exceptions\PageRefreshStrategyException::invalidRefreshScroll($scroll));
6-
@endphp
7-
8-
<meta name="turbo-refresh-method" content="{{ $method }}">
9-
<meta name="turbo-refresh-scroll" content="{{ $scroll }}">
3+
<x-turbo::refresh-method :method="$method" />
4+
<x-turbo::refresh-scroll :scroll="$scroll" />

0 commit comments

Comments
 (0)