Posted onMay 28, 2023

How to use slots in react elegantly

We all know, we can use props to implement component slots. This is a good way, but the props of the components will become more and more.
Also, you can filter the children by element's type, but it isn't a good idea.
And, you can use HOC to wrap the Component, and use Proxy to reduce the children. you can use the subComponent, like:

<YouComponent.SubComponentA>a</YouComponent.SubComponentA>

And then, your Component's props will get:

slot: {   SubComponentA: {children, props}}

This is a good idea. But There is a better way.
We focus on children, children will be a array, or string, or a ReactElement, or undefined.
The ReactElement has type, you can check the child with the type's name.
You will use your Component like this:

<YouComponent>    <Slot name="SubComponentA">a</Slot>    b</YouComponent>

<Slot /> is a component that it render null. And it has a generator function, like this:

import {ReactElement} from 'react'import {SlotProps} from './slot.interface';function Slot(_: SlotProps): ReactElement {  return null as unknown as ReactElement;}Slot.getSlot = function* getCollectionNode(props: SlotProps): any {  yield props.children;};let _Slot = Slot as (props: SlotProps) => JSX.Element;export default _Slot;

And then, In your component's code, you can use a hook to reduce the children. The hook like this:

import React from 'react';export function useSlot(children: any) {  const result: Record<string, any> = {    children: []  };  React.Children.map(children, (child: React.ReactElement<any, React.JSXElementConstructor<any>>) => {    if(React.isValidElement(child)){      const type = child.type as any;      const props = child.props;      if(type.name === 'Slot') {        const slot = type.getSlot(child.props);        result[props.name] = slot.next().value;      } else {        result['children'].push(child);      }    } else {      result['children'].push(child);    }  })  return result;}

the result of the useSlot(children), will be :

{   SubComponentA: 'a',   children: ['b']}

That is my way to use slot in React. Do you have another way? Please tell me.

Top comments(1)

Hendrik Ras

Hi, I'm Hendrik I love JavaScript, so I guess I'm a little crazy. Have been coding professionally for well over 15 years now and as a hobby for even longer.