Namespaced Components

namespaced.ts

// source: https://react-typescript-cheatsheet.netlify.app/docs/advanced/misc_concerns

import { forwardRef } from "react";

const Input = (props: any) => <input {...props} />;

const Form = 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 });

/* Slightly different approach */
/* export const CustomForm = Object.assign(Form, { Input: Input }); */