A Disabled React Component

Fairly often in a React app you need to disable a component based on a prop or some state. Using a Disabled component is a clean and reusable way to handle that conditional logic.

You could choose to implement disabled by not showing the component at all (eg setting display: none), or you can do as I've done here and change the opacity to gray out the component. Most importantly, you can easily disable click events by setting the pointerEvents css property to none.