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> ) }
rootMargin
The root margin of the intersection observer. See the Intersection Observer API.
threshold
The threshold of the intersection observer. See the Intersection Observer API.
smoothScroll
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
.
jumplist
This is an array of jumplist nodes, each with its isIntersecting
status.
clearJumplist()
This is a method you can use to empty the jumplist array.
currentJumplistIndex
The first-most active jumplist node. Sometimes multiple nodes might be intersecting the viewport simultaneously. Is -1
if no nodes are intersecting.
activeJumplistIndex
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.
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> ) }
nodeID*
A unique string to identify this node.
htmlElement
Customize the HTML element that is rendered in the DOM. Defaults to div
.
...rest
All other props are spread onto the DOM element as HTML attributes.
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> ) }
nodeID
A unique string to identify the target node that this button should navigate to.
direction
When set, the button will navigate one node in the specified direction. Can be prev
or next
.
Customize the HTML element that is rendered in the DOM. Defaults to button
.
...rest
All other props are spread onto the DOM element as HTML attributes.
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 ( ... ) }
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>
All types can be directly imported.
import { IJumplistContext, JumplistProviderProps JumplistButtonProps, JumplistNodeProps, JumplistNode, JumplistNodes, } from '@faceless-ui/jumplist/dist/types';