Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
createSlot
✓ import { createSlot } from 'react-slotify';
✗ const { createSlot } = require('react-slotify');
The primary factory function to create new slot instances. React Slotify is an ESM-first library.
createSlot<T>
✓ import { createSlot } from 'react-slotify';
export const MyParamSlot = createSlot<{ myParam: string }>();
✗ import { createSlot } from 'react-slotify';
export const MyParamSlot = createSlot(); // Missing type parameter for props
When the slotted content needs to receive props, define their shape using TypeScript generics with `createSlot<T>()` for type safety.
SlotComponent (e.g., MySlot)
✓ import { createSlot } from 'react-slotify';
export const MySlot = createSlot();
✗ import { MySlot } from 'react-slotify'; // MySlot is created by you, not exported by the library itself
`createSlot()` returns an object that includes the `Slot` component and its `Renderer`. You create your own named slot instances, which are then used as components.
This quickstart demonstrates how to define multiple slots, including one with typed props, render them within a host component with default content, and then consume these slots with specific content in a parent component, alongside standard React children.
import { createSlot } from 'react-slotify';
import React from 'react';
// Define a slot that can receive a 'myParam' string prop
export const MyParamSlot = createSlot<{ myParam: string }>();
// Define a simple slot without props
export const MyBasicSlot = createSlot();
export const ComponentWithSlots = ({ children }: { children: React.ReactNode }) => {
return (
<div style={{ border: '1px solid blue', padding: '10px', margin: '10px' }}>
<h3>ComponentWithSlots (Host)</h3>
<p>This component uses React-slotify to project content.</p>
<h4>MyParamSlot Area:</h4>
<MyParamSlot.Renderer childs={children} myParam="dynamicValue">
<p>Default content for MyParamSlot: No custom slot provided.</p>
</MyParamSlot.Renderer>
<h4>MyBasicSlot Area:</h4>
<MyBasicSlot.Renderer childs={children}>
<p>Default content for MyBasicSlot: This is the fallback.</p>
</MyBasicSlot.Renderer>
<h4>Standard Children Area:</h4>
<div>{children}</div>
</div>
);
};
// App.tsx
import { ComponentWithSlots, MyParamSlot, MyBasicSlot } from './component';
const App = () => {
return (
<div style={{ fontFamily: 'sans-serif', padding: '20px' }}>
<h1>React-Slotify Example</h1>
<ComponentWithSlots>
<MyParamSlot>
{params => (
<div style={{ backgroundColor: '#e0ffe0', padding: '5px' }}>
Specific content for MyParamSlot. Received param: "{params.myParam}"
</div>
)}
</MyParamSlot>
<MyBasicSlot>
<p style={{ backgroundColor: '#ffe0e0', padding: '5px' }}>
This content goes into MyBasicSlot.
</p>
</MyBasicSlot>
<p style={{ fontStyle: 'italic' }}>
This is regular 'children' content, not specifically slotted.
</p>
</ComponentWithSlots>
<ComponentWithSlots>
<p>This is another instance without specific slot content provided.</p>
</ComponentWithSlots>
</div>
);
};
export default App;
Errors
Common errors & fixes
Property 'myParam' does not exist on type '{}'.
Attempting to access props within a slot (e.g., `params.myParam`) when the `createSlot` factory function was called without defining the generic type for those props (`createSlot<{ myParam: string }>()`).
fixDefine the expected props by using TypeScript generics when creating the slot: `export const MySlot = createSlot<{ myParam: string }>();` TypeError: Cannot read properties of undefined (reading 'Renderer')
Attempting to use `MySlot.Renderer` before the `MySlot` instance has been correctly initialized via `createSlot()` or before it's properly imported and accessible in the component where `Renderer` is used.
fixEnsure that your slot instance is correctly created (e.g., `export const MySlot = createSlot();`) and then correctly imported into the component that hosts the slot (e.g., `import { MySlot } from './my-component';`). Error: React.Children.only expected to receive a single React element child.
While not directly from `react-slotify`, if you pass multiple children directly to a `Slot` component (e.g., `<MySlot><p>One</p><p>Two</p></MySlot>`), and the underlying implementation of your slot expects a single child or a function, it can lead to this React error.
fixEnsure that the content passed to a `<MySlot>` component is either a single React element, a fragment, or a function (if the slot is parameterized to accept a render prop function).
Audit
Dependencies
reactrequiredReact is a peer dependency required for building components and utilizing React's context system.