Merge pull request #166 from bryceosterhaus/master

Add section for namespaced components

Author: dreamcoder75

ADVANCED.md

@@ -73,6 +73,7 @@ The best tool for creating React + TS libraries right now is [`tsdx`](https://gi
 - [Section 3: Misc. Concerns](#section-3-misc-concerns)
   - [Writing TypeScript Libraries instead of Apps](#writing-typescript-libraries-instead-of-apps)
   - [Commenting Components](#commenting-components)
+  - [Namespaced Components](#namespaced-components)
   - [Design System Development](#design-system-development)
   - [Migrating from Flow](#migrating-from-flow)
   - [Prettier](#prettier)
@@ -1134,6 +1135,33 @@ export default function MyComponent({ label = "foobar" }: MyProps) {
 
 [Something to add? File an issue](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new).
 
+## Namespaced Components
+
+Often when creating similar components or components that have a parent-child relationship, it is useful to namespace your components. Types can easily be added be using `Object.assign()`;
+
+```tsx
+import React from 'react'
+
+const Input = (props: any) => <input {...props} />
+
+const Form = React.forwardRef<HTMLDivElement, any>(({children, ...otherProps}, ref) => (
+  <form {...otherProps} ref={ref}>
+    {children}
+  </form>
+));
+
+/**
+ * Exported components now can be used as `<Form>` and `<Form.Input>`
+ */
+export default Object.assign(Form, {Input: Input});
+```
+
+[View in the TypeScript Playground](https://www.typescriptlang.org/play/?jsx=2&ssl=1&ssc=1&pln=14&pc=52#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtCAOwGd4BJGsAV3gF44AKMHMOgC44KGgE8AlHA4A+OAB5gLdnADeAOk18IAgL5wA9DIpVaDOADFoeLsnQx1maAHcUUACbJM8gBIAVAFkAGQARYAA3AFEAGyQQJBoYABoRcRlublU0AAtgaPciGhTNdQgYbKQoAAV+Ol0UokwpWR4KOAUnKDwNTTKK6tr9Ro5VRt1jcnb2rNz8wt02hQNOkAmJCQBuE3IDACpdtt24SIAPSFgkdzhqcFoEmDo4Gghna9E4ACMkOFY6S5FHgADeRWLoyQGpK7A0EgdTMNgwcGHAwUJBnaDwdxITAoVjReAAeQ+ACskBh1Cg6HRgABzGjcGEpVTw9jCFkwXSbIA)
+
+(Contributed by @bryceosterhaus, see [further discussion](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/165))
+
+[Something to add? File an issue](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new).
+
 ## Design System Development
 
 I do like [Docz](https://docz.site/) which takes basically [1 line of config](https://www.docz.site/documentation/project-configuration#typescript) to accept Typescript. However it is newer and has a few more rough edges (many breaking changes since it is still < v1.0)