nhsuk-frontend-react

NHS.UK Components React

This is an unofficial React implementation of the NHS.UK Frontend library. It is heavily inspired by nhsuk-react-components, originally written by Thomas Judd-Cooper and other contributors.

Requirements

• nhsuk-frontend v7+
• React v18+

Installation

⚠️ You will need to install nhsuk-frontend separately ⚠️

# Using pnpm
pnpm add nhsuk-frontend-react nhsuk-frontend

# Using npm
npm install nhsuk-frontend-react nhsuk-frontend

# Using yarn
yarn add nhsuk-frontend-react nhsuk-frontend

Migration from nhsuk-react-components

To automate migration from nhsuk-react-components, you can run the following codemod:

npx jscodeshift -t ./node_modules/nhsuk-frontend-react/tools/from-nhsuk-react-components-migrator.ts \
  --parser=tsx \
  --extensions=tsx \
  ./src/**/**/*.tsx

For the most part, this will update your imports and component usages. However, there will be some cases where you will need to manually update your codebase.

Example Usage

import { Button, Fieldset, Input } from 'nhsuk-frontend-react'

const Component = () => (
  <>
    <Fieldset>
      <Fieldset.Legend isPageHeading>What is your NHS number?</Fieldset.Legend>
      <Input
        width="10"
        hint={
          <>
            Your NHS number is a 10 digit number that you find on any letter the NHS has sent you. For example, <span className="nhsuk-u-nowrap">485 777 3456</span>.
          </>
        }
      />
    </Fieldset>
    <Button>Continue</Button>
  </>
)

Contributing

Testing

To run the tests, you can use the following command:

# Using pnpm
pnpm test

# Using npm
npm test

# Using yarn
yarn test

License

The codebase is released under the MIT Licence, unless stated otherwise.