React component groups under one namespace

A nice way of exposing a set of related React (sub)components under one namespace: export const Header = Object . assign ( ( props : PropsWithChildren ) => { return ( < div className = " flex " > { props . children } < /div > ); }, { IconTitle : HeaderIconTitle , SectionItem : HeaderSectionsItem , Section : HeaderSections , } ); With Header defined like this, the Header and it's sub components can be used like this: export const MainPage = () => { return ( < Header > < Header . IconTitle icon = { < IconPretty /> } / > < Header . Section > < Header . SectionItem label = " foo " value = " foo " /> < Header . SectionItem label = " bar " value = " bar " /> < Header . SectionItem label = " baz " value = " baz " /> < /Header.Section > < /Header > ); };