https://github.com/maybebot/named-slots
Named slots for preact
https://github.com/maybebot/named-slots
Last synced: 3 days ago
JSON representation
Named slots for preact
- Host: GitHub
- URL: https://github.com/maybebot/named-slots
- Owner: maybebot
- Created: 2025-03-03T19:37:39.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-10-26T20:07:03.000Z (3 months ago)
- Last Synced: 2025-10-26T21:13:41.384Z (3 months ago)
- Language: TypeScript
- Size: 145 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - named-slots - Declarative "holes" for React components, inspired by slots in Vue, Svelte, Angular, and WebComponents. (Angular-Inspired Solutions / Wrappers)
- fucking-awesome-angular - named-slots - Declarative "holes" for React components, inspired by slots in Vue, Svelte, Angular, and WebComponents. (Angular-Inspired Solutions / Wrappers)
README
# named-slots
Slots for preact, react and solid in under 0.2Kb.
Slots allow to define "holes" in your components that can be filled with JSX.
Inspired by slots in Vue/Svelte/Angular/WebComponents.
```sh
npm i named-slots
```
## Quick start
### Defining slots
Set the names of the slots you're using with `defineSlots` and use them in your JSX like ``, where want the slotted content to appear.
```tsx
import { defineSlots } from "named-slots";
export const Card = ({ children }) => {
const { Slot } = defineSlots(children, ["header", "content", "footer"]);
return (
Fallback content
Fallback footer
);
};
```
### Consuming components with Slots
Now you can slot content into your Card component. The only thing you need to do is set a `slot="slotName"` on the element you wish to slot in. To render only text or multiple elements, use the `` element.
```tsx
This div is not semantic
One
Two
```
## Fallback
When defining a `` the content inside of it will be treated as fallback, in case nothing is slotted inside of that slot. If you do not want anything to be rendered, self-close the slot tag ``.
```
{/* no fallback, will not render unless slotted*/}
Loading... {/* Will render "Loading..." until slotted */}
```
## defineSlots and hasSlot
The `defineSlots` function handles the usage of slots. It takes the `children` prop of the component where it's used, and a string array of the slot names. If using Typescript add a `as const` to the string array so Typescript can check if the slot names are typed correctly.
`defineSlots` returns an object with the `Slot` component, but also a `hasSlot` function that allows to check if a slot has been slotted in, for conditional rendering.
```tsx
export const DefinedCard = ({ children }: { children: Slottable }) => {
const { Slot, hasSlot } = defineSlots(children, ["header", "content", "footer"] as const);
const hasContent: boolean = hasSlot("content");
```
## With Solid.js
Since solid does not use a VDOM it has a dedicated import.
```ts
import { Slot } from "named-slots/solid";
```
In addition every element with `slot` needs to be an HTML element, not a Solid component (or wrapped in one like the ``). In the example above, `` would not work. `
` would.
---
Made with 🍕 in Amsterdam.