Skip to content

Commit 504506b

Browse files
brophdawg11brophdawg11
committed
Merge branch 'release-next'
2 parents 407d885 + aa3f078 commit 504506b

File tree

78 files changed

+5981
-1823
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+5981
-1823
lines changed

‎CHANGELOG.md‎

Lines changed: 229 additions & 150 deletions
Large diffs are not rendered by default.

‎contributors.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@
116116
- doytch
117117
- Drishtantr
118118
- EdgeOneDev
119+
- edmundhung
119120
- edwin177
120121
- eiffelwong1
121122
- ek9
@@ -277,6 +278,7 @@
277278
- maximevtush
278279
- maxpou
279280
- mcansh
281+
- mcollina
280282
- MeatSim
281283
- MenouerBetty
282284
- Methuselah96
@@ -312,6 +314,7 @@
312314
- noisypigeon
313315
- nowells
314316
- Nurai1
317+
- nwleedev
315318
- Obi-Dann
316319
- okalil
317320
- OlegDev1

‎docs/api/components/Link.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -232,3 +232,53 @@ useful when updating search params and you don't want to trigger a revalidation.
232232
By default (when not specified), loaders will revalidate according to the routers
233233
standard revalidation behavior.
234234

235+
### unstable_mask
236+
237+
[modes: framework, data]
238+
239+
Masked path for for this navigation, when you want to navigate the router to
240+
one location but display a separate location in the URL bar.
241+
242+
This is useful for contextual navigations such as opening an image in a modal
243+
on top of a gallery while keeping the underlying gallery active. If a user
244+
shares the masked URL, or opens the link in a new tab, they will only load
245+
the masked location without the underlying contextual location.
246+
247+
This feature relies on `history.state` and is thus only intended for SPA uses
248+
and SSR renders will not respect the masking.
249+
250+
```tsx
251+
// routes/gallery.tsx
252+
export function clientLoader({ request }: Route.LoaderArgs) {
253+
let sp = new URL(request.url).searchParams;
254+
return {
255+
images: getImages(),
256+
modalImage: sp.has("image") ? getImage(sp.get("image")!) : null,
257+
};
258+
}
259+
260+
export default function Gallery({ loaderData }: Route.ComponentProps) {
261+
return (
262+
<>
263+
<GalleryGrid>
264+
{loaderData.images.map((image) => (
265+
<Link
266+
key={image.id}
267+
to={`/gallery?image=${image.id}`}
268+
unstable_mask={`/images/${image.id}`}
269+
>
270+
<img src={image.url} alt={image.alt} />
271+
</Link>
272+
))}
273+
</GalleryGrid>
274+
275+
{data.modalImage ? (
276+
<dialog open>
277+
<img src={data.modalImage.url} alt={data.modalImage.alt} />
278+
</dialog>
279+
) : null}
280+
</>
281+
);
282+
}
283+
```
284+

‎docs/api/hooks/useLinkClickHandler.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
3434
{
3535
target,
3636
replace: replaceProp,
37+
unstable_mask,
3738
state,
3839
preventScrollReset,
3940
relative,
@@ -43,6 +44,7 @@ function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
4344
}: {
4445
target?: React.HTMLAttributeAnchorTarget;
4546
replace?: boolean;
47+
unstable_mask?: To;
4648
state?: any;
4749
preventScrollReset?: boolean;
4850
relative?: RelativeRoutingType;
@@ -89,6 +91,10 @@ Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/Vie
8991

9092
Specify the default revalidation behavior for the navigation. Defaults to `true`.
9193

94+
### options.unstable_mask
95+
96+
Masked location to display in the browser instead of the router location. Defaults to `undefined`.
97+
9298
### options.unstable_useTransitions
9399

94100
Wraps the navigation in [`React.startTransition`](https://react.dev/reference/react/startTransition)

‎examples/modal-data-router/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎examples/modal-data-router/.stackblitzrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"installDependencies": true,
3+
"startCommand": "npm run dev"
4+
}

‎examples/modal-data-router/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Modal (Data Router)
3+
toc: false
4+
---
5+
6+
# Data Router Modal Example
7+
8+
Same as the [Modal](../modal/) example but using a Data Router.
9+
10+
## Preview
11+
12+
Open this example on [StackBlitz](https://stackblitz.com):
13+
14+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/modal-data-router?file=src/App.tsx)

‎examples/modal-data-router/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>React Router - Data Router Modal Example</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)