NHS.UK React Components

• NHS.UK React Components
  • Coming from 0.x?
  • Upgrading to 2.0
  • Upgrading to 3.0
  • Upgrading to 4.0
  • Installation
  • Usage
    • Documentation and examples / storybook
  • Maintainers
  • Preparing Releases

NHS.UK Frontend ported to React

Coming from 0.x?

If you're coming from versions of the library prior to 1.0.0, please give this doc a brief read, as there a number of changes between 0.x release and the 1.0 release.

Upgrading to 2.0

If you're upgrading to 2.0, please be aware we have made some breaking changes. This doc has the details.

Upgrading to 3.0

If you're upgrading to 3.0, please be aware we have made some breaking changes. This doc has the details.

Upgrading to 4.0

If you're upgrading to 4.0, please be aware we have made some breaking changes. This doc has the details.

Installation

You can install this package using either yarn or npm.

npm install --save nhsuk-react-components
# Or
yarn add nhsuk-react-components

Usage

import React, { PureComponent } from 'react';

// You can import components from the global module
import { Button } from 'nhsuk-react-components';

// Or you can import components directly
import Button from 'nhsuk-react-components/lib/components/button';

class GetStartedButton extends PureComponent {
  render() {
    return <Button>Click Me!</Button>;
  }
}

Documentation and examples

A storybook containing all of the components and their usage can be found here.

Maintainers

We're currently looking for new maintainers! If you have knowledge of React and would be willing to help maintain this library, you can email me (Thomas Judd-Cooper) here.

• Thomas Judd-Cooper (GitHub)
• Sam Brown (GitHub)
• Luke Pearson (GitHub)
• Kevin Kuszyk (GitHub)
• Kai Spencer (GitHub)

Preparing Releases

Releases run in CI using github actions.

To prepare a release create a new release TAG in github with your release version.

NPM_TOKEN should be stored in the repositories secrets in GitHub

• Create a new release with a tag like major.minor.patch against main.
• If the change is a beta then select pre-release as true, this will make the tag point at beta. Otherwise the tag will be latest.

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.