react-skip-nav

A react component that allows the user to skip to the main content of a website/app. The component will only be visible when focused.

For feature requests and bug reports, please open up a new issue HERE.

Installation

To install this component: yarn add react-skip-nav or npm install react-skip-nav.

Usage

Using the component in your React app:

import React from 'react';
import SkipNav from 'react-skip-nav';

// import our styles
import "react-skip-nav/lib/style.css";


const MyComponent = (props) => {
  return (
    <SkipNav
      id='main-content',
      text='skip to main content',
      targetDomId='main-content'
    />
    <Header />
    <div id="main-content">
      <MainContent />
    </div>
  )
}

export default MyComponent;

It is important to place the component as close to the top of the page as possible so that it is the first (or one of the first) elements a user will tab navigate to.

Available Props