Skip links

React component that helps you to add skip navigation links.

Read about skip links:

Install

  npm install -S skip-links

Usage

Import component

  import SkipLinks from 'skip-links'

Call component and pass props

  render() {
    const links = [
      {title: 'Skip to main content', to: 'main'},
      {title: 'Skip to footer', to: 'footer'}
    ];

    return (
      <SkipLinks links={links}/>
    )
  }

Props

Prop	Type	required	Description
`links`	Array	True	Add links you need to show as object have `title` and `to`.

Shape of array:

  [
    {
      title: String Required, // Text you need to show
      to: String Required //  Destination ID without hash '#'
    }
  ]

Q&A

How to customize the skip links?

you can pass style attribute directly to your object:

const links = [{ title: 'Skip Navigation', to: 'main', style: { backgroundColor: 'red' } }]

  <SkipLinks links={links}/>

you can override the class .c-links__item

Contributing

Hey there! Thanks for your interest in helping out. If you happen to run into any issues, please open an issue, and I'll do my best to help out.

To begin contributing, you'll first need to clone this repository, then navigate into the repository's directory.

git clone git@github.com:{{ YOUR_USERNAME }}/skip-links.git

cd skip-links

Next, install the dependencies using npm.

npm install

Great! – you're ready to contribute!

Just create your git branch and run code locally. To do that, execute the start command:

commands	Description
`npm start`	Run project locally on port=3000 and running demo.
`npm test`	Run test cases.

That's All. Thanks.

License

Muhnad/skip-links

ErrorLooks like something went wrong!

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 2

Packages 0

Languages

Error
Looks like something went wrong!

Packages