Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rowellx68/nhs-components
A React implementation of the NHS.UK Frontend library. Compatible with Next.js
https://github.com/rowellx68/nhs-components
component-library frontend nextjs nhs react reactjs reactservercomponents
Last synced: 2 days ago
JSON representation
A React implementation of the NHS.UK Frontend library. Compatible with Next.js
- Host: GitHub
- URL: https://github.com/rowellx68/nhs-components
- Owner: rowellx68
- License: mit
- Created: 2023-07-15T21:28:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-02T13:39:19.000Z (26 days ago)
- Last Synced: 2024-12-23T18:39:17.374Z (4 days ago)
- Topics: component-library, frontend, nextjs, nhs, react, reactjs, reactservercomponents
- Language: TypeScript
- Homepage: https://rowellx68.github.io/nhs-components/
- Size: 26.1 MB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# `nhsuk-frontend-react`
This is an unofficial React implementation of the [NHS.UK Frontend](https://github.com/nhsuk/nhsuk-frontend) library. It is heavily inspired by [nhsuk-react-components](https://github.com/NHSDigital/nhsuk-react-components), originally written by [Thomas Judd-Cooper](https://github.com/Tomdangov) and [other contributors](https://github.com/NHSDigital/nhsuk-react-components/graphs/contributors).
This implementation supports the latest version of the NHS.UK Frontend library and is written in TypeScript. It is designed to be used with modern React applications and is compatible with Next.js and React Server Components.
## Version compatibility
With the release of v9 of the NHS.UK Frontend library, the version of this library has been bumped to v4. The following table shows the compatibility between the NHS.UK Frontend library and `nhsuk-frontend-react`:
| nhsuk-frontend | nhsuk-frontend-react | branch |
| -------------- | -------------------- | ------------------------------------------------------------- |
| `8.x.x` | `3.x.x` | [v3](https://github.com/rowellx68/nhs-components/tree/v3) |
| `9.x.x` | `4.x.x` | [main](https://github.com/rowellx68/nhs-components/tree/main) |
## Features
- Written in TypeScript
- Polymorphic components for easy customisation
- Compatible with Next.js and React Server Components
- Supports the latest version of the NHS.UK Frontend library
- Supports all components from the NHS.UK Frontend library
## Polymorphic Components
A few components in this library are polymorphic, meaning they can accept a different component as a prop and render as that component. This is particularly useful when you want to use a custom component, say a `Link` component from a routing library, instead of the default `a` tag.
This feature is was taken from [Mantine](https://github.com/mantinedev/mantine), have a look at their [polymorphic components documentation](https://mantine.dev/guides/polymorphic/) for more information.
Here is an example of how you can use a custom `Link` component with the `Header.Logo` component:
```tsx
import { Header, HeaderContainer, HeaderLogo } from 'nhsuk-frontend-react';
import Link from 'next/link';
export const AppHeader = () => (
{/* Now HeaderLogo will have the same prop type as Link. That means that href is now required. */}
);
```
## Full List of Polymorphic Components
Click to expand
- `ActionLink`
- `BackLink`
- `Breadcrumb.BackLink`
- `Breadcrumb.ListItem`
- `Button`
- `Card.Image`
- `Card.Link`
- `ContentList.ListItem`
- `DoDontList.Label`
- `ErrorSummary.ListItem`
- `Fieldset.Legend`
- `Figure.Image`
- `Footer.ListItem`
- `Header.Logo`
- `Header.NavItem`
- `Header.TransactionLink`
- `Heading`
- `Link`
- `Pagination.Item`
- `SummaryList.Row.ActionLink`
- `Tabs.Title`
- `TaskList.Item.NameAndHint`
- `VisuallyHidden`
- `WarningCallout.Label`
## Installation
```bash
pnpm add nhsuk-frontend nhsuk-frontend-react
```
## Example
Both usages below will render the following:
### Usage with React
Code
```tsx
import {
Input,
Header,
Container,
Main,
Column,
Row,
Button,
} from 'nhsuk-frontend-react';
const Component = () => (
<>
Your NHS number is a 10 digit number that you find on any
letter the NHS has sent you. For example,{' '}
485 777 3456.
>
}
/>
Continue
>
);
```
### Usage with Next.js
Code
```tsx
import {
Input,
Header,
HeaderContainer, // notice how we have to import HeaderContainer separately
HeaderLogo, // Next.js does not work with nested components yet
Container,
Main,
Column,
Row,
Button,
} from 'nhsuk-frontend-react';
const Component = () => (
<>
Your NHS number is a 10 digit number that you find on any
letter the NHS has sent you. For example,{' '}
485 777 3456.
>
}
/>
Continue
>
);
```
## Storybook
All of the components in this library are documented in Storybook.
https://rowellx68.github.io/nhs-components/
## Testing
To run the tests, you can use the following command:
```bash
pnpm test
```
## License
The codebase is released under the MIT Licence, unless stated otherwise.