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:

• [x] Button
• [x] 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?
• [x] Create React App example with lazy loading/path splitting and tree shaking
• [x] 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