2.0.1 • Published 7 days ago
nhsuk-frontend-react v2.0.1
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
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.