In Subframe, you can customize components using two primary methods: props and slots:
  • Props: Ideal for customizing simple, static content such as text, images URLs, numbers, or other basic data types.
  • Slots: Provide greater flexibility by allowing you to insert arbitrary React nodes directly into components. Slots utilize the React composition pattern, offering more control and interactivity while avoiding prop drilling.
  • Use props for straightforward, static content updates like titles, labels, image URLs, and simple data.
  • Use slots when you require dynamic content or need access to specific subcomponent properties like event handlers (onClick, onChange) or attributes (alt, src).
Let’s compare two implementations of the <TrackCard /> component from the previous example. 
"use client"
import { TrackCardWithProps } from "@/ui/components/TrackCardWithProps"

function TrackCardWithPropsExample() {
  const [isFavorite, setIsFavorite] = useState<boolean>(false)

  function handleFavoriteClick() {
    setIsFavorite((prev) => !prev)
  }

  const favoriteIcon = isFavorite ? "FeatherHeartOff" : "FeatherHeart"

  return (
    <TrackCardWithProps
      title="The Less I Know The Better"
      artist="Tame Impala"
      length="3:38"
      genre="Disco"
      // We can only pass a static image URL here and no alt text,
      // since the props for the underlying <img /> are not exposed
      image="/covers/tame_impala-currents.jpg"
      // We have no way to add an onClick handler or an icon to our
      // FavoriteButton here, since it's events are not exposed
    />
  )
}

export default TrackCardWithPropsExample
Subcomponents can help clarify intended usage by explicitly exposing slots and relevant props to the consumer of a component. The <TrackCardWithSlots.FavoriteButton /> subcomponent is a good example of this in the example above.
When using Subcomponents, you can expose all necessary props and slots to the consumer of a component while ensuring that the component is easy to use and understand.