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

use-focus-path

v0.0.3

Published

A React Hook for managing focus in TV apps.

Downloads

5

Readme

use-focus-path

A React Hook for managing focus in TV apps.

Motivation

Users of TV apps typically use LRUD for navigation. Accordingly, the element on the page that has focus is of particular importance.

It is not always the case that your runtime environment includes a system for managing focus. Environments that do include such a system, like the browser, typically have support for a one dimensional navigation system (i.e.; Tab and Shift + Tab), rather than two dimensional navigation (LRUD).

For these reasons, it is up to the app to manage its own focus state. This hook helps you to do that.

Installation

Install using npm:

npm install use-focus-path

or yarn:

yarn add use-focus-path

Guides

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.

What is a Focus Path?

A focus path is a string that represents an element on the page that has focus. For instance, you may have a focus path of "profilePage", representing that the profile page of your app has focus.

Focus paths can be hierarchical, too. A period is used to separate pieces of the path. In the focus path profilePage.0, the focus is on the 0th item within the profile page.

If you have used a modern JavaScript router, such as React Router, you may notice the similarity between routes and focus paths. Focus paths are very similar to routes. The difference is that routes represent the user's location within the app, whereas focus paths represent what has focus within the app.

Is this library right for me?

The limitations described below may help you to determine that.

Getting Started

Configure the Provider somewhere high up in your application's component tree. You may optionally specify an initial focus path.

import { FocusProvider } from 'use-focus-path';

export default function App() {
  return (
    <FocusProvider initialFocusPath="app.profile.settings.0">
      <AppContents />
    </FocusProvider>
  );
}

Next, use the hook in your components.

import { useFocusPath } from 'use-focus-path';

export default function Profile() {
  const { isFocused } = useFocusPath('profile');

  // ...use `isFocused`, or any of the other things returned by `useFocusPath`

  return <div className="profile">Profile</div>;
}

To learn more about the different properties of the return value of the hook, refer to the API documentation below.

API

This library has two named exports: FocusProvider and useFocusPath.

<FocusProvider />

A Context Provider that you must place at the root of your application.

import { FocusProvider } from 'use-focus-path';

export default function App() {
  return (
    <FocusProvider initialFocusPath="app.profile.settings.0">
      <AppContents />
    </FocusProvider>
  );
}

| Prop | Default value | Description | | ------------------ | ------------- | -------------------------------------------------- | | initialFocusPath | "" | The focus path to use when the app is initialized. |

useFocusPath( targetFocusPath )

A Hook that returns information about whether or not targetFocusPath is focused, as well as functions to update the focus path.

| Arguments | Type | Default value | Description | | ----------------- | ------ | ------------- | -------------------------------------------------------- | | targetFocusPath | string | "" | The focus path you are interested in knowing more about. |

The return value of the hook has the following properties:

| Arguments | Type | Description | | ------------------- | -------------- | --------------------------------------------------------------------------------- | | isFocused | boolean | true when the targetFocusPath, or a child path, is focused. | | isFocusedExact | boolean | true when the targetFocusPath is focused exactly. | | child | string|number | The direct child of targetFocusPath. Will be a number if the child is a number. | | focusPath | string | The full focus path. | | setFocusPath | function | Set a new focus path. | | setFocusedChild | function | Update the focused child of targetFocusPath. | | setFocusedSibling | function | Update the focus path with a sibling of targetFocusPath. |

import { useFocusPath } from 'use-focus-path';

export default function Profile() {
  const { isFocused } = useFocusPath('profile');

  useEffect(() => {
    console.log('The focus state changed', isFocused);
  }, [isFocused]);

  return <div className="profile">Profile</div>;
}

Prior Art

Limitations

  • No support for pointer (mouse) inputs
  • No spatial navigation; all transitions must be manually specified