Component communication

Most of Starfield operates on community-standard React rules.

However, from time to time, we have patterns where a parent component will want to communicate to its children, for basic formatting or layout reasons. When this happens, we try not to reach for React contexts, because those only work on the client side, and thus may add unnecessary limitations to how those components can be used. For example, this may mean a flash of wrongly styled content.

Instead, we use HTML/CSS tools when possible.

CSS variables

Data attributes and CSS selectors

A sub-component can check its parent's classes:

My parent is active

1  <div data-active={true}>
2      <div className="text-blue-500 [[data-active]>&]:text-red-500">My parent is active</div>
3  </div>

Thus, some components expose an internal API in the form of parent attribute names. Set a parent to a component with a certain attribute, and the component will adjust its styling to match.

We can protect the integrity of this information by strongly typing them: