Im trying to pass the interface type to a Object returning jsx components, but i dont want to explicitly specify the type for each component. how can i do this.
->>>
interface blockProps {
children: any;
}
const block: blockProps = {
h1: ({ children }: any) => (
<h1 className="my-3 text-6xl font-bold md:text-8xl md:my-4">{children}</h1>
),
h2: ({ children }: any) => (
<h2 className="my-3 text-5xl font-bold md:text-7xl md:my-4">{children}</h2>
),
h3: ({ children }: any) => (
<h3 className="my-3 text-4xl font-bold md:text-6xl md:my-4">{children}</h3>
),
h4: ({ children }: any) => (
<h4 className="my-3 text-3xl font-bold md:text-5xl md:my-4">{children}</h4>
),
blockquote: ({ children }: any) => (
<blockquote className="relative p-4 my-8 text-xl italic border-l-4 bg-neutral-100 text-neutral-600 border-neutral-500">
<p>{children}</p>
</blockquote>
),
};
You can define your types like this:
type possibleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'blockquote';
interface blockProps {
children: any;
}
type blockMap = {
[key in possibleTags]: (props: blockProps) => React.ReactElement<any, any>;
};
I had a little fun and here :): https://stackblitz.com/edit/react-ts-xj27j6?file=index.tsx
interface Blocks {
[key: string]: (props: { children: ReactNode }) => JSX.Element
}
const block: Blocks = {
// ...
}