The react-slots runtime library
npm install @beqa/react-slotsreact-slots empowers you to prioritize composability in your component APIs.
- Lightweight (< 8KB
minified, < 3KB minified & gzipped)
- Composability with ease
- Type-safety
- Server Components support
- Not implemented with context
- Intuitive API
- Self-documenting with typescript
- Elegant solution to a11y attributes
- Inversion of control
The installation process consists of two parts: installing the core library
(around 3KB gzipped piece of code that runs in your users' browsers and
handles the core logic) and an optional compile-time plugin (for transpiling
JSX syntax for your slot elements into regular function invocations).
You can find the docs on the
docs website
If you need any assistance, feel free to join our
Discord server
``tsx
import { useSlot, SlotChildren, Slot } from "@beqa/react-slots";
type ListItemProps = {
children: SlotChildren<
| Slot<"title"> // Shorthand of Slot<"title", {}>
| Slot<"thumbnail"> // Shorthand of Slot<"thumbnail", {}>
| Slot<{ isExpanded: boolean }> // Shorthand of Slot<"default", {isExpanded: boolean}>
>;
};
function ListItem({ children }: ListItemProps) {
const { slot } = useSlot(children);
const [isExpanded, setIsExpanded] = useState();
return (
}
onClick={() => setIsExpanded(!isExpanded)}
>
{/ Render thumbnail if provided, otherwise nothing/}
{/ Render a fallback if title is not provided/}
Expand for more
{/ Render the description and pass the prop up to the parent /}
);
}
`Specifying Slot Content From the Parent
With
slot-name attribute`jsx

A title
this is a description
`With Templates
`jsx
import { template } from "beqa/react-slots";

A title
{({ isExpanded }) =>
isExpanded ? A description : "A description"
}
doesn't have to be a function
;
`With type-safe templates
`tsx
// Option #1
import { createTemplate } from "@beqa/react-slots";
const template = createTemplate();// Option #2
import { template, CreateTemplate } from "@beqa/react-slots";
const template = template as CreateTemplate;
// Typo-free and auto-complete for props!

A title
{({ isExpanded }) =>
isExpanded ? A description : "A description"
}
doesn't have to be a function
;
`Advanced Examples
| The code samples below represent actual implementations. No need to define external state or event handlers for these components to function. |
| --------------------------------------------------------------------------------------------------------------------------------------------- |
$3
Checkout
live example
`jsx
First Accordion
This part of Accordion is hidden
Second Accordion
AccordionList makes it so that only one Accordion is open at a time
Third Accordion
No external state required
`$3
Checkout
live example
`jsx
``If you like this project please show support by starring it on
Github