5-way navigation for React and SolidJS
useFocusSync now takes tree from context
Pavel Hrách
(May 23, 2026, 1:04 AM +0200)
6f59c8a3
3220d293
+18
-10
+3
examples/react-example/src/Showcase.tsx
+3
examples/react-example/src/Showcase.tsx
···
6
6
gridItemHandler,
7
7
initialHandler,
8
8
itemHandler,
9
+
useFocusSync,
9
10
useNavigationContext,
10
11
useNavnode,
11
12
useOnFocusChange,
···
23
24
export function Showcase() {
24
25
const { tree } = useNavigationContext();
25
26
const nav = useNavnode("showcase", gridHandler.compose(initialHandler("start")));
27
+
28
+
useFocusSync();
26
29
27
30
useOnFocusChange(nav.id, (id) => {
28
31
if (id === null) {
+1
-3
examples/react-example/src/main.tsx
+1
-3
examples/react-example/src/main.tsx
···
1
-
import { createNavigationTree, NavigationProvider, useFocusSync } from "@fiveway/react";
1
+
import { createNavigationTree, NavigationProvider } from "@fiveway/react";
2
2
import React from "react";
3
3
import ReactDOM from "react-dom/client";
4
4
···
10
10
const navigationTree = createNavigationTree();
11
11
12
12
function App() {
13
-
useFocusSync(navigationTree);
14
-
15
13
return (
16
14
<NavigationProvider tree={navigationTree}>
17
15
<Showcase />
+3
examples/solid-example/src/Showcase.tsx
+3
examples/solid-example/src/Showcase.tsx
···
6
6
gridItemHandler,
7
7
initialHandler,
8
8
itemHandler,
9
+
useFocusSync,
9
10
useNavigationContext,
10
11
useOnFocusChange,
11
12
} from "@fiveway/solid";
···
22
23
export function Showcase() {
23
24
const { tree } = useNavigationContext();
24
25
const nav = createNavnode("showcase", gridHandler.compose(initialHandler("start")));
26
+
27
+
useFocusSync();
25
28
26
29
useOnFocusChange(nav, (id) => {
27
30
if (id === null) {
+1
-3
examples/solid-example/src/main.tsx
+1
-3
examples/solid-example/src/main.tsx
···
1
1
/* @refresh reload */
2
2
3
-
import { createNavigationTree, NavigationProvider, useFocusSync } from "@fiveway/solid";
3
+
import { createNavigationTree, NavigationProvider } from "@fiveway/solid";
4
4
import { render } from "solid-js/web";
5
5
6
6
import { Showcase } from "./Showcase.tsx";
···
9
9
10
10
function App() {
11
11
const navigationTree = createNavigationTree();
12
-
13
-
useFocusSync(navigationTree);
14
12
15
13
return (
16
14
<NavigationProvider tree={navigationTree}>
+5
-2
packages/fiveway-react/src/element.ts
+5
-2
packages/fiveway-react/src/element.ts
···
1
1
import {
2
-
type NavigationTree,
3
2
type ComposedHandler,
4
3
composeHandlers,
5
4
registerListener,
···
7
6
} from "@fiveway/core";
8
7
import { elementHandler } from "@fiveway/core/dom";
9
8
import { useRef, useMemo, useEffect } from "react";
9
+
10
+
import { useNavigationContext } from "./context.tsx";
10
11
11
12
export type ElementHandler = ComposedHandler & {
12
13
register: (e: HTMLElement | null) => void;
···
38
39
}, []);
39
40
}
40
41
41
-
export function useFocusSync(tree: NavigationTree): void {
42
+
export function useFocusSync(): void {
43
+
const { tree } = useNavigationContext();
44
+
42
45
useEffect(() => {
43
46
const handler = () => {
44
47
const el = elementHandler.query(tree, tree.focus);
+5
-2
packages/fiveway-solid/src/element.ts
+5
-2
packages/fiveway-solid/src/element.ts
···
3
3
registerListener,
4
4
spatialItemHandler,
5
5
type ComposedHandler,
6
-
type NavigationTree,
7
6
} from "@fiveway/core";
8
7
import { elementHandler } from "@fiveway/core/dom";
9
8
import { createEffect, createSignal, onCleanup } from "solid-js";
9
+
10
+
import { useNavigationContext } from "./context.tsx";
10
11
11
12
export type ElementHandler = ComposedHandler & {
12
13
register: (e: HTMLElement | null) => void;
···
38
39
return handler;
39
40
}
40
41
41
-
export function useFocusSync(tree: NavigationTree): void {
42
+
export function useFocusSync(): void {
43
+
const { tree } = useNavigationContext();
44
+
42
45
createEffect(() => {
43
46
const cleanup = registerListener(tree, "#", () => {
44
47
const el = elementHandler.query(tree, tree.focus);