Render any token media, supports a wide range of media types using the RenderTokenMedia component

Prerequisites ⚙️

Install and configure ReservoirKit.


TokenMedia is a component that renders a token in an easy and customizable way. Use this component in various layouts while not having to implement your own rendering logic. Below is a list of component properties:

tokenThis is a token object mapping out to a Token object returned from the tokensv5 api. The only required parameters properties from that object are image, media and collection. Without this property the component will not render
staticOnlyA boolean prop that controls showing a static image preview instead of displaying the token media
imageResolutionsmall medium large
styleAn inline style prop override that's applied to the container of the rendered component
classNameA string that applies a class to the container of the rendered component
modelViewerOptionsAn object containing additional attributes to control the model-viewer. Refer to the model-viewer docs for more information
videoOptionsAn object containing additional HTML5 video attributes. Refer to the docs for more information
audioOptionsAn object containing additional HTML5 audio attributes. Refer to the docs for more information
iframeOptionsAn object containing additional HTML5 iframe attributes. Refer to the docs for more information
fallbackA function that passes in a media type and expects a ReactElement or null. Use this prop to override the default fallback per media type. If null is returned then the default fallback if used.
fallbackModedefault: Displays the collection image, a 'No content Available' description as well as a button to refresh the metadata.
simple: Displays an image icon
disableOnChainRenderingIf a token's image metadata is missing, the TokenMedia component will call the contract's tokenURI function directly to try and resolve the image before falling back to the fallback. You can disable this logic with the disableOnChainRendering prop
onErrorA callback whenever an error occurs loading the media or preview.
onRefreshTokenA callback for the default fallback UI that the user decided to refresh the token metadata. You can use this to display a notification and give the user some feedback.

List of supported media types

  • mp4,mov
  • wav, mp3, m4a
  • gltf, glb
  • png, jpeg, jpg, gif, svg
  • html


import { TokenMedia, useTokens } from '@reservoir0x/reservoir-kit-ui'


  const { data: tokens } = useTokens({
    collection: "0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"

	return (, i) => (

In the example above we import TokenMedia and useTokens hook. We then use the useTokens hook to fetch the token data for a given collection. Finally we iterate over the tokens and use the TokenMedia component to render the tokens, passing in the token prop.

Advanced Usage

In some cases you may want to override one particular media type (video for example) and render it in your own player or layer some additional controls. To support this use case we export a utility function to extract the media type from the token object:

import { TokenMedia, useTokens, extractMediaType } from '@reservoir0x/reservoir-kit-ui'


  const { data: tokens } = useTokens({
    collection: "0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"

	return (, i) => {
   	const mediaType = extractMediaType(token) 
    if (mediaType === 'mp4') {
      return <CustomVideoComponent/>
		return (<TokenMedia