{"library":"react-slotify","title":"React Slotify","description":"React Slotify is a lightweight (~500B) TypeScript library that introduces the 'Slots' concept into modern React applications, offering a semantic alternative to the 'render props' pattern. As of version 0.2.2, it provides a type-safe API for defining and consuming content slots within components, aiming for simplicity and improved readability. While a relatively new library, its focus on explicit content projection differentiates it from patterns like default `children` or explicit `render props` by allowing multiple, named content areas within a single component. Its release cadence is not explicitly stated, but it appears to be in active development, awaiting a 1.0 stable release, which suggests the API might evolve.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-slotify"],"cli":null},"imports":["import { createSlot } from 'react-slotify';","import { createSlot } from 'react-slotify';\nexport const MyParamSlot = createSlot<{ myParam: string }>();","import { createSlot } from 'react-slotify';\nexport const MySlot = createSlot();"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createSlot } from 'react-slotify';\nimport React from 'react';\n\n// Define a slot that can receive a 'myParam' string prop\nexport const MyParamSlot = createSlot<{ myParam: string }>();\n// Define a simple slot without props\nexport const MyBasicSlot = createSlot();\n\nexport const ComponentWithSlots = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <div style={{ border: '1px solid blue', padding: '10px', margin: '10px' }}>\n      <h3>ComponentWithSlots (Host)</h3>\n      <p>This component uses React-slotify to project content.</p>\n\n      <h4>MyParamSlot Area:</h4>\n      <MyParamSlot.Renderer childs={children} myParam=\"dynamicValue\">\n        <p>Default content for MyParamSlot: No custom slot provided.</p>\n      </MyParamSlot.Renderer>\n\n      <h4>MyBasicSlot Area:</h4>\n      <MyBasicSlot.Renderer childs={children}>\n        <p>Default content for MyBasicSlot: This is the fallback.</p>\n      </MyBasicSlot.Renderer>\n      \n      <h4>Standard Children Area:</h4>\n      <div>{children}</div>\n    </div>\n  );\n};\n\n// App.tsx\nimport { ComponentWithSlots, MyParamSlot, MyBasicSlot } from './component';\n\nconst App = () => {\n  return (\n    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>\n      <h1>React-Slotify Example</h1>\n      <ComponentWithSlots>\n        <MyParamSlot>\n          {params => (\n            <div style={{ backgroundColor: '#e0ffe0', padding: '5px' }}>\n              Specific content for MyParamSlot. Received param: \"{params.myParam}\"\n            </div>\n          )}\n        </MyParamSlot>\n\n        <MyBasicSlot>\n          <p style={{ backgroundColor: '#ffe0e0', padding: '5px' }}>\n            This content goes into MyBasicSlot.\n          </p>\n        </MyBasicSlot>\n\n        <p style={{ fontStyle: 'italic' }}>\n          This is regular 'children' content, not specifically slotted.\n        </p>\n      </ComponentWithSlots>\n\n      <ComponentWithSlots>\n        <p>This is another instance without specific slot content provided.</p>\n      </ComponentWithSlots>\n    </div>\n  );\n};\n\nexport default App;","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}