bpk-component-link

4.1.2 • Public • Published

bpk-component-link

Backpack link component.

Installation

npm install bpk-component-link --save-dev

Usage

import React from 'react';
import BpkLink, { BpkButtonLink } from 'bpk-component-link';

export default () => (
  <div>
    Links can be both <BpkLink href="http://www.skyscanner.net/">anchor tags</BpkLink> as well
    as <BpkButtonLink onClick={() => console.log('link button click!')}>button tags</BpkButtonLink>.
  </div>
)

Single Page App (SPA) Frameworks

If you're using a SPA framework like react-router-dom or Next.js to navigate between pages without refreshing, then you can wrap BpkLink in the component provided by the framework.

react-router-dom Link using the component prop

Next.js Link using a custom component as the child element

Props

BpkLink

Property PropType Required Default Value
children - true -
href string true -
onClick func false null
blank bool false false
rel string false null
alternate bool false false

BpkButtonLink

Property PropType Required Default Value
children - true -
onClick func true -
alternate bool false false

Theme props

For both BpkLink and BpkButtonLink the following theme attributes are required.

  • linkColor
  • linkHoverColor
  • linkActiveColor
  • linkVisitedColor

Alternate:

  • linkAlternateColor
  • linkAlternateHoverColor
  • linkAlternateActiveColor
  • linkAlternateVisitedColor

Readme

Keywords

none

Package Sidebar

Install

npm i bpk-component-link

Weekly Downloads

1,724

Version

4.1.2

License

Apache-2.0

Unpacked Size

32.8 kB

Total Files

14

Last publish

Collaborators

  • mungodewar
  • anambl
  • skyscanner-koalasquad
  • gert-jan.vercauteren
  • frugoman
  • marianeumayer-skyscanner
  • ojcurt
  • mattface