Focus

A React library for managing focus in TV apps.

✓ Controls LRUD navigation for you – automatically
✓ Hooks-first declarative API

Motivation

Users of TV apps most often use LRUD controls to navigate within the app. Consequently, the focused element on the page is of particular importance.

It is not always the case that your runtime environment includes a built-in system for managing focus. Environments that do include such a system, like the browser, often have a simple focus system that doesn't align with the complex needs of LRUD environments.

Because of this, it is up to the application to manage its own focus state. This library helps you to do that.

Installation

Install using npm:

npm install @xdproto/focus

or yarn:

yarn add @xdproto/focus

This library has the following peer dependencies:

• react@^16.8.0

Table of Contents

• Guides
  • Getting started
  • FAQ
• API
  • <FocusRoot/>
  • <FocusNode/>
  • useFocusNode()
  • useFocusTree()
  • useFocusHierarchy()
• Prior Art
• Limitations

Guides

Getting Started

Render the FocusRoot somewhere high up in your application's component tree. This is the root node of the focus tree.

import { FocusRoot } from '@xdproto/focus';

export default function App() {
  return (
    <FocusRoot>
      <AppContents />
    </FocusRoot>
  );
}

Next, use the FocusNode component to create a focusable node on the page.

import { FocusNode } from '@xdproto/focus';

export default function Profile() {
  return <FocusNode className="profile">Profile</FocusNode>;
}

This library manages moving focus between the FocusNode nodes as the user inputs LRUD commands.

Configuring this behavior is managed entirely through props of the FocusNode components. To learn more about those props, refer to the API documentation below.

FAQ

What is LRUD?

LRUD is an acronym that stands for left-right-up-down, and it refers to the directional buttons typically found on remotes. In LRUD systems, input devices usually also have some kind of "submit" button, and, less commonly, a back button.

Is this library right for me?

The limitations described below may help you to determine that.

API

This library has three named exports: FocusRoot, FocusNode, and useFocus.

<FocusRoot />

Serves as the root node of a new focus hierarchy.

All props are optional.

import { FocusRoot } from '@xdproto/focus';

export default function App() {
  return (
    <FocusRoot orientation="vertical">
      <AppContents />
    </FocusRoot>
  );
}

<FocusNode />

A Component that represents a FocusNode node in the focus tree.

All props are optional.

import { FocusNode } from '@xdproto/focus';

export default function Profile() {
  return (
    <FocusNode
      elementType="button"
      className="profileBtn"
      onSelect={({ node }) => {
        console.log('The user just selected this profile', node);
      }}>
      Profile
    </FocusNode>
  );
}

useFocusTree()

A Hook that returns the focus tree object.

import { useFocusTree } from '@xdproto/focus';

export default function MyComponent() {
  const focusTree = useFocusTree();

  useEffect(() => {
    console.log('the current state', focusTree.getState());

    focusTree.setFocus('my-node');
  }, []);
}

useFocusNode( focusId )

A Hook that returns the focus node with ID focusId.

import { useFocusNode } from '@xdproto/focus';

export default function MyComponent() {
  const buttonFocusNode = useFocusNode('my-button');

  console.log('Is the button focused?', buttonFocusNode.isFocused);
}

useFocusHierarchy()

A Hook that returns an array representing the focus hierarchy, which are the nodes that are focused in the node tree. Each entry in the array is a focus node. The last node in the hierarchy is the node that is exactly focused.

import { useFocusHierarchy } from '@xdproto/focus';

export default function MyComponent() {
  const focusHierarchy = useFocusHierarchy('button');
  console.log(focusHierarchy);
  // => [
  //   { nodeId: 'root', ... },
  //   { nodeId: 'homePage', ... },
  //   { nodeId: 'mainNav', ... },
  // ]
}

Prior Art

• "Pass the Remote" on the Netflix Tech Blog
• bbc/lrud
• react-tv

Limitations

• No support for pointer (mouse) inputs
• No spatial navigation