Govuk-frontend-react NPM

govuk-frontend-react

govuk-frontend as React components.

This is proof of concept, showing how govuk-frontend can be used as CSS modules via a set of React components that is published to npm, in a way that is compatible with create-react-app, with support for tree shaking and code splitting/lazy loading.

See:

https://github.com/govuk-react/govuk-react/issues/76

Conventions

Common conventions on where our React prop names differ from the nunjucks macro option names.

nunjucks	react
element	as
attributes	rest props (where appropriate)
text	children (where appropriate)

Create React App support

Works! Including:

Lazy loading/path splitting
Tree shaking of CSS

See https://github.com/penx/govuk-frontend-react-example

TODO:

I aim to complete the following as part of the PoC:

Button
Header compatible with React Router
Support for js-enabled class, used by Header, plus any associated JS required by Header
Date Input compatible with Final Form
Code coverage checks in CI
100% code coverage
Meaningful unit tests
Unit test to validate against govuk-frontend nunjucks html output
Prettier
TypeScript or Flow?
Create React App example with lazy loading/path splitting and tree shaking
Next.js example
- Support for path splitting blocked by zeit/next-plugins#190 (related)
Server side only example with form submit and display of form errors