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 further 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 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.

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 further 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 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.