Props and Slots

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.

​

Recommended usage

• 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

When used in conjunction with Subcomponents, you can make sure that you expose all the necessary props and slots to the consumer of a component while making sure that the component is easy to use and understand.