namespaced React components

Image of Author
September 22, 2022 (last updated September 30, 2022)

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 />