React Import & Export Component Pattern

// MyComponent.tsx
const MyComponent = () => <div>Hey, MyComponent</div>;
export default MyComponent;

// App.tsx
import MyComponent from './MyComponent';

// MyComponent.tsx
export const MyComponent = () => <div>Hey, MyComponent</div>;

// App.tsx
import { MyComponent } from './MyComponent';

// MyComponent.tsx
export const MyComponent = () => <div>Hey, MyComponent</div>;

// App.tsx
import { MyComponent as MySuperComponent } from './MyComponent';
export const App = () => <MySuperComponent />;

// MyComponent.tsx
export const Switch = () => <div>Hey, Switch</div>;
export const Group = () => <div>Hey, Group</div>;

// App.tsx
import { * as MyComponent } from './MyComponent';
export const App = () => (
    <>
        <MyComponent.Switch />
        <MyComponent.Group />
    </>
);

// MyComponent.tsx
export const Switch = () => <div>Hey, Switch</div>;
export const Group = () => <div>Hey, Group</div>;

// MyParentComponent.tsx
export * from "./MyComponent";

// App.tsx
import { Switch, Group } from './MyParentComponent';
export const App = () => (
    <>
        <Switch />
        <Group />
    </>
);

// MyComponent.tsx
export const Switch = () => <div>Hey, Switch</div>;
export const Group = () => <div>Hey, Group</div>;

// MyParentComponent.tsx
export  * as MyComponent from "./MyComponent";

// App.tsx
import { MyComponent } from './MyParentComponent';
export const App = () => (
    <>
        <MyComponent.Switch />
        <MyComponent.Group />
    </>
);

// MyComponent.tsx
export type Gender = "Male" | "Female"; // Accept only "Male" or "Female"

// App.tsx
import { Gender } from './MyComponent'

// MyComponent.tsx
export interface IUser {
    id: string;
    name: string;
}

// App.tsx
import { IUser } from './MyComponent'