#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

rootMargin
  :  string
  |  optional

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

threshold
  :  string
  |  optional

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

smoothScroll
  :  boolean
  |  optional

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

jumplist
  :  array

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

clearJumplist()
  :  method

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

currentJumplistIndex
  :  number

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

activeJumplistIndex
  :  number

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.

...settings

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

nodeID*
  :  string
  |  required

A unique string to identify this node.

htmlElement
  :  string
  |  optional

Customize the HTML element that is rendered in the DOM. Defaults to div.

...rest
  :  object
  |  optional

All other props are spread onto the DOM element as HTML attributes.

#<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

nodeID
  :  string
  |  optional

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

direction
  :  string
  |  optional

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

htmlElement
  :  string
  |  optional

Customize the HTML element that is rendered in the DOM. Defaults to button.

...rest
  :  object
  |  optional

All other props are spread onto the DOM element as HTML attributes.

#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';