Skip to content

Commit 288a8eb

Browse files
committed
feat: start users-without-js doc
1 parent a2ee3c7 commit 288a8eb

File tree

3 files changed

+51
-1
lines changed

3 files changed

+51
-1
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export const meta = () => [
2+
{
3+
title: "useHydrated recipe (RVF)",
4+
},
5+
];
6+
7+
# `useHydrated`
8+
9+
```tsx
10+
import { useSyncExternalStore } from "react";
11+
12+
function subscribe() {
13+
return () => {};
14+
}
15+
16+
export function useHydrated() {
17+
return useSyncExternalStore(
18+
subscribe,
19+
() => true,
20+
() => false,
21+
);
22+
}
23+
```
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export const meta = () => [
2+
{
3+
title: "Supporting users without JS",
4+
},
5+
];
6+
7+
# Supporting users without JS
8+
9+
If you're using a server-side framework like Remix, you can use RVF even if JS is disabled in the user's browser.
10+
However, the way you go about doing this may vary depending on how important this is to you.
11+
12+
## If supporting users without JS is important for you
13+
14+
You should fall back to [native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
15+
when JS is disabled. This is more work to maintain, but it's a better experience for users.
16+
17+
In order to do this properly, you can pass `noValidate` to your form when JS is available.
18+
A helpful tool for doing that is [useHydrated from remix-utils](https://github.com/sergiodxa/remix-utils#usehydrated).
19+
If you aren't using remix, you can copy the recipe [here](/recipes/use-hydrated).
20+
21+
This will allow RVF to take over validation when it can,
22+
but will fall back to native browser validation when it can't.
23+
24+
## If users without JS are an edge-case
25+
26+
TODO

apps/docs-v2/app/ui/layout/Navigation.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -233,12 +233,13 @@ export const navigation: Array<NavGroup> = [
233233
{
234234
title: "Guides",
235235
links: [
236-
{ title: "Arrays and nested data", href: "/arrays-and-nested" },
237236
{ title: "Different input types", href: "/input-types" },
237+
{ title: "Arrays and nested data", href: "/arrays-and-nested" },
238238
{
239239
title: "Scoped abstractions",
240240
href: "/scoping",
241241
},
242+
{ title: "Support users without JS", href: "/supporting-no-js" },
242243
],
243244
},
244245
{

0 commit comments

Comments
 (0)