React Patterns & Best PracticesEntry 4 of 10

Grouping Sub-Components (Accordion.Item)

Attaching the child components as properties of the parent function so they're used as Accordion.Item, Accordion.Title, and Accordion.Content.

Notes

  • Functions are objects in JavaScript, so components can have properties.
  • One import (Accordion) gives the consumer every part, and the dot syntax shows they belong together.
  • With TypeScript, Object.assign keeps the types of the attached components.

What / Why / When

What

Namespacing compound components.

Why

Cleaner imports and self-documenting markup.

When

Any compound component.

Code compare

React
// components/Accordion/index.tsimport AccordionRoot from "./Accordion";import AccordionItem from "./AccordionItem";import AccordionTitle from "./AccordionTitle";import AccordionContent from "./AccordionContent";​const Accordion = Object.assign(AccordionRoot, {  Item: AccordionItem,  Title: AccordionTitle,  Content: AccordionContent,});​export default Accordion;

Angular has no dot syntax for components. Group them with a shared selector prefix and export them together as an array.

Angular
// accordion/index.tsexport const ACCORDION = [  AccordionComponent,  AccordionItemComponent,  AccordionTitleComponent,  AccordionContentComponent,] as const;

Quick reference

ReactAngular
Object.assign(Root, { Item, Title, Content })Exported array of components
<Accordion.Item><app-accordion-item>
One importOne import (ACCORDION)