npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@xdproto/focus

v2.0.0-beta.13

Published

A React library for managing focus in TV apps

Downloads

15

Readme

Focus

Travis build status npm version

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:

Table of Contents

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.

| Prop | Type | Default value | Description | | ------------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------- | | orientation | string | 'horizontal' | Whether the children of the root node are arranged horizontally or vertically. | | wrapping | boolean | 'false' | Set to true for the navigation to wrap when the user reaches the start or end of the root's children. |

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.

| Prop | Type | Default value | Description | | ------------------------ | ------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | propsFromNode | function | | A function you can supply to compute additional props to apply to the element. The function is passed one argument: the focus node. | | className | string | | A class name to apply to this element. | | focusedClass | string | "isFocused" | A class name that is applied when this element is focused. | | focusedExactClass | string | "isFocusedExact" | A class name that is applied this element is exactly focused. | | disabledClass | string | "focusDisabled" | A class name that is applied this element is disabled. | | elementType | string|elementType | 'div' | The React element type to render. For instance, "img" or motion.div. | | focusId | string | {unique_id} | A unique identifier for this node. Specify this yourself for debugging purposes, or when you will need to manually set focus to the node. | | focusOnMount | boolean | false | Whether or not to focus this node when the component mounts. | | orientation | string | 'horizontal' | Whether the children of this node are arranged horizontally or vertically. | | wrapping | boolean | 'false' | Set to true for the navigation to wrap when the user reaches the start or end of the children list. | | disabled | boolean | 'false' | This node will not receive focus when true. | | defaultChildFocusIndex | number | 0 | The index of the child to move focus to when this element receives focused. Only applies for nodes with children. | | onMount | function | | A function that is called when the element mounts. Passed the focus node as the first argument. | | onUnmount | function | | A function that is called when the element unmounts. Passed the focus node as the first argument. | | onFocus | function | | A function that is called when the node receives focus. | | onBlur | function | | A function that is called when the node loses focus. | | onKey | function | | A function that is called when the user presses any TV remote key while this element has focus. | | onArrow | function | | A function that is called when the user presses a directional button. | | onLeft | function | | A function that is called when the user presses the left button. | | onUp | function | | A function that is called when the user presses the up button. | | onDown | function | | A function that is called when the user presses the down button. | | onRight | function | | A function that is called when the user presses the right button. | | onSelect | function | | A function that is called when the user pressed the select button. | | onBack | function | | A function that is called when the user presses the back button. | | onMove | function | | A function that is called when the focused child index of this node changes. Only called for nodes with children. | | children | React node | | Children of the Focus Node. | | render | function | | A render prop you may specify instead of children. It is passed one argument: the focus node. | | ...rest | any | | All other props are applied to the underlying DOM node. |

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

Limitations

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