#Jumplist API

#<JumplistProvider>

This component provides the jumplist context to your app. It does not have any required props and renders nothing in the DOM. This is where the global settings are defined.

import React from 'react';
import { JumplistProvider } from '@faceless-ui/jumplist';

export const MyApp = () => {
  return (
    <JumplistProvider
      threshold={0.5}
      rootMargin="-100px 0px 0px 0px"
    >
      ...
    </JumplistProvider>
  )
}

#<JumplistProvider> Props

The root margin of the intersection observer. See the Intersection Observer API.

The threshold of the intersection observer. See the Intersection Observer API.

Will inject html: { scroll-behavior: smooth; } as inline CSS onto the root html element of your DOM. See smooth-scrolling for more details. Defaults to true.

#<JumplistProvider> Context

This is an array of jumplist nodes, each with its isIntersecting status.

This is a method you can use to empty the jumplist array.

The first-most active jumplist node. Sometimes multiple nodes might be intersecting the viewport simultaneously. Is -1 if no nodes are intersecting.

The most recent jumplist node that has intersected. This is helpful when no nodes are intersecting and the currentJumplistIndex is -1. This property is essentially a cached index.

All settings are spread into the context.

#<JumplistNode>

Each jumplist node is a wrapper around the Intersection Observer API, and syncs its isIntersecting status to the provider.

import React from 'react';
import { JumplistNode } from '@faceless-ui/jumplist';

export const MyComponent = () => {
  return (
    <div>
      <JumplistNode nodeID="node-1">
        ...
      </JumplistNode>
      <JumplistNode nodeID="node-2">
        ...
      </JumplistNode>
    </div>
  )
}

#<JumplistNode> Props

A unique string to identify this node.

#<JumplistButton>

The jumplist button is a simple wrapper around the useJumplist hook, used to quickly and easily navigate to any node in the jumplist.

import React from 'react';
import { JumplistNode } from '@faceless-ui/jumplist';

export const MyComponent = () => {
  return (
    <div>
      <JumplistNode nodeID="node-1">
        ...
      </JumplistNode>
      <JumplistNode nodeID="node-2">
        ...
      </JumplistNode>
    </div>
  )
}

#<JumplistButton> Props

A unique string to identify the target node that this button should navigate to.

When set, the button will navigate one node in the specified direction. Can be prev or next.

#useJumplist

A hook used to access the jumplist context.

import React from 'react';
import { useJumplist } from '@faceless-ui/jumplist';

export const MyComponent = () => {
  const jumplist = useJumplist();

  return (
    ...
  )
}

#Accessibility

This package strictly follows the WAI-ARIA standards:

• <JumplistButton> is a <button> element with the following properties:

  • type is button
  • aria-label is Scroll to PREVIOUS, NEXT, or NODE_ID

• <JumplistNode> has the following properties:

  • role is region
  • aria-labelledby is equal to the ID of the <JumplistButton>

#TypeScript

All types can be directly imported.

import {
  IJumplistContext,
  JumplistProviderProps
  JumplistButtonProps,
  JumplistNodeProps,
  JumplistNode,
  JumplistNodes,
} from '@faceless-ui/jumplist/dist/types';