How can i add viewTransitionName to Image component in React?

[zolzaya]

How can I enhance my React application by incorporating the viewTransitionName property into the Image component for using View Transition API?

For example:

 <Image
    width={200}
    height={240}
    src={product.defaultImage || ''}
    alt={product.title}
    layout="constrained"
    style={{
      viewTransitionName="image-expand"
    }}
  />

[ascorbic]

Hi. I'd recommend targeting it with css, e.g. set the id or className and in a stylesheet do:

.expandingImage {
viewTransitionName: "image-expand"
}

You could also try wrapping it in a div, and apply the inline style to the div though you may need to set some extra styles on that to ensure it expands properly with the image.