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