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