namespaced React components

Namespaced React components leverage some aspects of javascript to create component names that are dot separated, such as <Button.Primary /> and <Button.Secondary />.

The way to implement namespaced components is via an object.

const Button = {
  Primary: () => <button />
  Secondary: () => <button />
}

The value of namespacing is that it lets you encapsulate certain aspect of your meta-component in a way that lets you share similar aspects between components. For example, if all your buttons had the same hover property, but different border radius’, you could implement an “internal” hover-button, and then the namespaced components could be themselves implemented via the internal button

export const Button = {
  Primary: () => <HoverButton />
  Secondary: () => <HoverButton />
}

function HoverButton() {
  return <button />
}