@nice-digital/nds-prev-next

> Previous and next navigation component for the NICE Design System

- @nice-digital/nds-prev-next - Installation - Usage - React - Props - SCSS - HTML

Installation

Install Node, and then:

``sh
npm i @nice-digital/nds-prev-next --save
`

Usage

$3

The only required property is destination. The destination will be used as the link text if no text property is supplied.

Import the PrevNext component from the package and use within JSX:

`jsx
import React from "react";
import { PrevNext } from "@nice-digital/nds-prev-next";
import { Link } from "react-router-dom";

nextPageLink={{
text: "Page Header",
destination: "/pageheader",
elementType: Link
}}
previousPageLink={{
text: "Alert",
destination: "/alert",
elementType: Link
}}
/>;
`

> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

#### Props

##### nextPageLink & previousPageLink

- Type: object

An object to represent the link.

`jsx
nextPageLink={{
text: "Page Header",
destination: "/pageheader",
elementType: Link
}}
/>
`

##### nextPageLink.destination

- Type: string (required)

A string to represent the destination of the link.

##### nextPageLink.text

- Type: string (required)

The text that the link will be applied to. Usually the title of the resource the link will go to.

##### nextPageLink.elementType

- Type: React.ElementType
- Default: a

The tag that you would like to use for the link. By default it's an HTMLAnchorElement and will result in something like About page but you can pass a custom router element such as Link to result in About page.

##### nextPageLink.method

- Type: string
- Default: href

The method of activating the link. By default a link is an anchor with href attribute for the destination. Other routers may use another prop, such as to. This allows you to stipulate any possible required attribute name. If no method is provided and the elementType is an anchor (or an elementType is not supplied) then the method will default to href. If the elementType is not an anchor and no method is supplied, the method will default to to.

##### nextPageLink.intro

- Type: string
- Default: "Previous page" or "Next page"

Text that you would like to appear if different from "Next page" or "Previous page".

`jsx
nextPageLink={{
text: "About us",
destination: "/about-us",
intro: "Find out more"
}}
/>
`

##### className

- Type: string

Any additional classes that will be applied to the containing div.

##### additional props

Any additional props are spread on to the containing div element, useful for accessibility or data attributes.

$3

If you're not using React, then import the SCSS directly into your application by:

`scss
@forward '@nice-digital/nds-prev-next/scss/prev-next';
`

$3

If you're not using React, then include the SCSS as above and use the HTML:

`html



``