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.
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
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.
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>
</>
)
To run the tests, you can use the following command:
# Using pnpm
pnpm test
# Using npm
npm test
# Using yarn
yarn test
The codebase is released under the MIT Licence, unless stated otherwise.