Create slots within React Components in a similar way to Vue JS. This library supports Typescript
npm install react-slots
OR
yarn add react-slots
Create the component that will have slots inserted into it using the useSlot hook:
import { useSlots } from "react-slots";
interface LayoutSlots {
header?: ReactNode;
default?: ReactNode;
footer?: ReactNode;
}
const Layout = (props: { children: ReactNode }) => {
const { slots } = useSlots<LayoutSlots>(props.children);
return (
<div className="wrapper">
<div className="header">{slots.header}</div>
<div className="content">{slots.default}</div>
<div className="footer">{slots.footer}</div>
</div>
);
};
Then when using this component, either use the template component or add the slot prop to indicate which slot the children belong to. Any sections without a slot attribute will be assigned to the default slot.
import { Template } from "react-slots-test";
<Layout>
<div slot="header">Header</div>
<p>test</p>
<p>Content</p>
<Template slot="footer">
<p>Footer</p>
<p>Footer2</p>
</Template>
</Layout>
The Template component has only one prop 'slot'. This component can be used if you wish to put multiple parallel components within one specific slot.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent