nano-slots

A super lightweight modern alternative to react-slot-fill with familiar API.

- [x] Control sub-components rendering with Slot and Fill
- [x] Render content of sub-component in multiple places
- [x] Speedy - Fill and Slot communicate directly with each other
- [x] Tested with testing-library
- [x] Written in TypeScript
- [x] Zero dependencies
- [x] Only ~431 B

📦 Install

``sh
npm i -S nano-slots
`

`sh
yarn add nano-slots
`

💻 Usage

$3

`js
import { Box, Flex } from 'theme-ui'
import { SlotsProvider, Slot } from 'nano-slots'

export const MediaObject = ({ children }) => (












{children}



)
`

$3

`js
import { Fill } from 'nano-slots'
import { MediaObject } from './media-object'

const MyApp = () => (







Mew

Purr purr purr

)
`


📖 API

$3

`js
import { SlotsProvider } from 'nano-slots'
`

#### Props

- children: ReactNode — any valid react children element

#### Description

Creates a context for Slot / Fill components.

$3

`js
import { Slot } from 'nano-slots'
`

#### Props

- name: string — unique slot name for current SlotsProvider
- children?: ReactNode — fallback in case Fill with matching name not provided, optional
- onChange?(hasFilled: boolean): void — callback for detecting state changes, on true children of matching Fill is rendered and fallback is hidden

#### Description

Define the target slot for Fill component. Can be used multiple times with the same name inside each SlotsProvider.

$3

`js
import { Fill } from 'nano-slots'
`

#### Props

- name: string — unique slot name for current SlotsProvider
- children: ReactNode — will be rendered inside matching Slot

#### Description

Render children into matching Slot of current SlotsProvider.




$3

`js
import createSlots from 'nano-slots'
`

#### Description

Designed for more advanced usages and stronger types.
Returns an object containing:

- .Provider — same as SlotsProvider, but with different context
- .Slot — same as Slot, but with own context
- .Fill — same as Fill, but with own context

Returned Slot and Fill can be used without a Provider.

$3

`ts
export interface ProviderProps {
children: React.ReactNode;
}

export function SlotsProvider(props: ProviderProps): JSX.Element;

export interface SlotProps {
name: Names;
children?: React.ReactNode;
}

export function Slot(props: SlotProps): JSX.Element;

export interface FillProps {
name: Names;
children?: React.ReactNode;
}

export function Fill(props: FillProps): null;

export default function createSlots(): {
Provider: (props: SlotsProviderProps): JSX.Element;
Slot: (props: SlotProps): JSX.Element;
Fill: (props: FillProps): null;
}
`

Alternatives

- react-slot-fill - abandoned project that inspired this one
- react-view-slot` - more modern approach, but 12x times bigger

---
MIT © John Grishin