{
"id": 7325444,
"title": "Implementing Named Slots in React With Child Type Inspection",
"url": "https://urgent.news/2026/09/14/implementing-named-slots-in-react-with-child-type-inspection",
"topic": "tech",
"section": "Tech",
"published": "2026-09-14T13:30:00.000Z",
"source": {
"name": "Dev.to",
"slug": "dev-to",
"url": "https://dev.to/hi_iam_chris/implementing-named-slots-in-react-with-child-type-inspection-oh4"
},
"original_language": "en",
"account": "React is known for its minimalistic approach, providing core components, props, and children while allowing developers to define structural composition patterns themselves. One such pattern, not natively available in React, is known as named slots, which enables a parent component to accept multiple distinct pieces of content and decide their rendering locations. This concept is familiar to Vue.js users, who may have encountered it with the slot name=... syntax. However, React does not have a built-in equivalent, but developers can achieve the same functionality using child type inspection, as explained in this article.\n\nThe goal is to build a user profile card, a common component found on platforms like LinkedIn or team directories, with a fixed layout that includes a cover photo, an avatar and name area, and a body divided into sections for personal details, work experience, and contact information. The parent component should be able to control the content for each section, making the card flexible and adaptable to different use cases.\n\nTo achieve this, the consumer defines the structure of the profile card in the following manner:\n\n```jsx\nProfileCard\nProfileHeader\n\nJane Kowalski\n\n\nLondon, United Kingdom\nTechnology\nMarch 2019\n\n\n\n\n\n\njane@example.com\nlinkedin.com/in/janekowalski\n\n\n```\n\nThe JSX structure reads like a document, with each child describing its role. This approach allows the parent component (ProfileCard) to render each section in the correct place, conditionally wrap elements, and add dividers without requiring the consumer to understand the internal workings of the card.\n\nThe core mechanism behind this approach involves using `React.Children.toArray()` in combination with type comparison to identify and extract specific child components. The following steps outline the implementation:\n\n1. Import the necessary child components (`ProfileHeader`, `ProfileDetails`, `WorkExperience`, `ContactInfo`) and the `React` library.\n\n2. Define the `ProfileCard` component with a single prop (`children`), which expects a ReactNode array.\n\n3. Convert the `children` prop into an array using `React.Children.toArray(children)`.\n\n4. Identify each child component by iterating through the array and comparing its type using `React.isValidElement(child) && child.type === `.\n\n5. Extract the relevant child components (`header`, `details`, `experience`, `contact`) based on their type.\n\n6. Render the `ProfileCard` by conditionally rendering the extracted child components in the desired structure, using appropriate dividers and class names.\n\nBy following this method, developers can replicate the functionality of named slots in React, enabling the creation of modular and flexible components like the user profile card.",
"summary": "React is deliberately minimal. It gives you components, props, and children while leaving structural composition patterns up to you. One pattern that doesn't exist natively but comes up constantly in design systems and component libraries is named slots : the ability to pass multiple distinct pieces of content into a parent component and have the parent decide where each one renders. If you've…",
"key_points": [
"Named slots concept enables parent to control child content rendering locations",
"React lacks built-in named slots, but child type inspection provides workaround",
"ProfileCard component demonstrates practical implementation of named slots pattern"
],
"editors_take": null,
"illustration": null,
"coverage": {
"outlets": 1,
"also_reported_by": []
},
"ai_generated": true,
"disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}