While the design system doesn't use React components, it is fully compatible with them. In fact, this documentation website is a React app.
If you're reading this, you're probably trying to use the design system with Next.js or a similar kind of React app.
The design system can save you a lot of time and effort in making your React components look right. But, if you need complex pre-made components that have lots of stateful client-side functionality, you're better off going elsewhere.
React doesn't support the
class attribute, so you'll need to replace all instances with
On a server-rendered page this is straightforward, but on a client-rendered React app you must remember to re-initialise the JS whenever you render new components.
One option is to call the component's init function in a
useEffect hook after it renders. For example:
If you're using a SSR framework like Next.js, you might see errors like
document is not defined.
You can solve this issue by wrapping your component init calls in an
if statement that checks the global window variable is set:
This design system doesn't include many components that users need to have complex, stateful interactions with (yet).
There are plenty of well-maintained, accessible-by-default React libraries to choose from:
This advice might change as the design system grows.
In the past Hackney has tried to make React ports of this design system, but it's always been more trouble than it's worth to maintain them.
The alternative would be to go all-in with React, but this wouldn't work for the many non-React apps we still need to maintain.