@flammenmensch/react-slot-props

Polymorphic component props implementation for React

Usage

import { createSlotComponent } from '@flammenmensch/react-slot-props'
import React from 'react'

// Define component props
type MyComponentProps = {
  Header: React.ReactElement
  Content: React.ReactElement
  Footer: React.ReactElement
  anotherPropA: string
  anotherPropB: number
}

// Implement component
const MyComponent = (props: MyComponentProps) => {
  return (
      <div>
        <header>{props.Header}</header>
        <main>
          {props.Content}
          {props.anotherPropA} - {props.anotherPropB}
        </main>
        <footer>{props.Footer}</footer>
      </div>
  )
}

const SlottedComponent = createSlotComponent(MyComponent, {
  slots: ['Header', 'Content', 'Footer']
})

// Use component in your app
const App = () => {
  return (
    <SlottedComponent anotherPropA='foo' anotherPropB={42}>
      <SlottedComponent.Header value={<h1>My App</h1>} />
      <SlottedComponent.Content value={<div>Content</div>} />
      <SlottedComponent.Footer value={<div>Copyright 2024</div>} />
    </SlottedComponent>
  )
}

Caveats

Optional slot props are unsupported for now

// This won't work
type Props = {
  slot?: React.ReactElement
}

// This works
type Props = {
  slot: React.ReactElement
}