@goncharovv/react-slots

@goncharovv/react-slots

Installation

``bash
npm install @goncharovv/react-slots
`

Quick start

1) Define slots with createSlot:

`tsx
import { createSlot } from '@goncharovv/react-slots';
import { PropsWithChildren } from 'react';

const HeaderSlot = createSlot('Header');
const FooterSlot = createSlot('Footer');
`

2) Build a component and read slots with useSlots:

`tsx
import { useSlots } from '@goncharovv/react-slots';
import { FC, PropsWithChildren } from 'react';

const _Modal: FC = ({ children }) => {
const slots = useSlots(children);
const header = slots.get(HeaderSlot);
const footer = slots.get(FooterSlot);

return (


const Modal = Object.assign(_Modal, {
Header: HeaderSlot,
Footer: FooterSlot,
});
`

3) Use it:

`tsx

Create Entity


Cancel
Create


`

Passing props through slots

Slots can carry typed props. Read them via .props:

`tsx
import { createSlot, useSlots } from '@goncharovv/react-slots';
import { FC, PropsWithChildren } from 'react';

interface TitleProps extends PropsWithChildren {
as: 'h1' | 'h2' | 'h3';
}

const Title: FC = (props) => {
const { as: Component, children } = props;

return (
{children}
);
};

const TitleSlot = createSlot('Title');

const _Heading: FC = ({ children }) => {
const slots = useSlots(children);
const title = slots.get(TitleSlot);

if (!title) throw new Error('Title slot is required');

return ;
};

const Heading = Object.assign(_Heading, {
Title: TitleSlot,
});
``