Namespace components in React refer to a pattern where components are organized under a parent component namespace. This pattern allows for a more structured and modular approach to component organization within a React application.

In this pattern, a parent component acts as a container or namespace for related child components. These child components are nested within the parent component, typically as properties or methods of an object. This organization provides a clear and intuitive naming convention for accessing these components within the application.

Namespace components help improve code organization, readability, and maintainability by grouping related components together. They also facilitate component reuse and scalability, as components can be easily located and accessed within the namespace hierarchy.

A step-by-step guide to create a namespace component

Create a Parent Component

Define a parent component, for example, Cars, which serves as a container for all car brands.

Example

export const Cars = {
  Volvo: () => <Volvo />,
  Toyota: () => <Toyota />,
};

or create a parent component which imports child components.

Cars.tsx

import Toyota from "./Toyota";
import Volvo from "./Volvo";

const Cars = () => {
  return <div>Cars</div>;
};

Cars.Toyota = Toyota;
Cars.Volvo = Volvo;

export default Cars;

The lines Cars.Toyota = Toyota; and Cars.Volvo = Volvo; are used to add properties to the Cars component. This pattern is used to attach additional components (or functions, objects, etc.) to a main component. It creates a namespace structure.

Define Child Components

Define child components for each car brand, such as Volvo, Toyota, etc. Nest the child components within the parent component, allowing you to use the syntax <Parent.Child />

Example

const Volvo = () => <h2>Volvo Car</h2>;
const Toyota = () => <h2>Toyota Car</h2>;

or create individual child components.

Volvo.tsx

const Volvo = () => {
  return <div>Volvo</div>;
};

export default Volvo;

Toyota.tsx

const Toyota = () => {
  return <div>Toyota</div>;
};

export default Toyota;

Full example #1

In the following example, Cars is the parent component that contains child components Volvo and Toyota. You can use <Cars.Volvo /> and <Cars.Toyota /> to render each specific car brand within the application.

Cars.tsx

// Child Components
const Volvo = () => <h2>Volvo Car</h2>;
const Toyota = () => <h2>Toyota Car</h2>;

// Parent Component
export const Cars = {
  Volvo: () => <Volvo />,
  Toyota: () => <Toyota />,
};

App.tsx

function App() {
  return (
    <div className="App">
      <Cars.Volvo />
      <Cars.Toyota />
    </div>
  );
}

Full example #2

App.tsx

function App() {
  return (
    <div className="App">
      <Cars />
      <Cars.Volvo />
      <Cars.Toyota />
    </div>
  );
}

Cars.tsx

import Toyota from "./Toyota";
import Volvo from "./Volvo";

const Cars = () => {
  return <div>Cars</div>;
};

Cars.Toyota = Toyota;
Cars.Volvo = Volvo;

export default Cars;

Volvo.tsx

const Volvo = () => {
  return <div>Volvo</div>;
};

export default Volvo;

Toyota.tsx

const Toyota = () => {
  return <div>Toyota</div>;
};

export default Toyota;