Bring slots to React components
npm install create-slotsBring Slots to React, with SSR support
🧩 Compose with confidence
🤖 Inversion of Control
🤞 A11y support in ease
🎨 Server Side Rendering
🍀 StrictMode compliant
💪 Best TypeScript support
🪶 Lightweight (< 700B)
Checkout the slides for the background story
1. Create your component with slots
``tsx
import React, { useId } from 'react'
import { createHost, createSlot } from 'create-slots'
const FieldLabel = createSlot('label')
const FieldInput = createSlot('input')
const FieldDescription = createSlot('div')
type FieldProps = React.ComponentPropsWithoutRef<'div'>
export const Field = (props: FieldProps) => {
const id = useId()
return createHost(props.children, (Slots) => {
const labelProps = Slots.getProps(FieldLabel)
const inputProps = Slots.getProps(FieldInput)
const inputId = inputProps?.id || id
return (
Field.Label = FieldLabel
Field.Input = FieldInput
Field.Description = FieldDescription
`
2. Use it
`tsx`
`tsx
import React, { useState } from 'react'
import { createHost, createSlot, getSlotProps, isSlot } from 'create-slots/list'
const SelectItem = createSlot('li')
const SelectDivider = createSlot('hr')
type SelectProps = React.ComponentPropsWithoutRef<'ul'>
export const Select = (props: SelectProps) => {
const [selected, setSelected] = useState
const indexRef = React.useRef(0)
return (
return slot
})}
Select.Item = SelectItem
Select.Divider = SelectDivider
`
2. Use it
`tsx``
MIT © Neo Nie