TokenMedia

Render any token media, supports a wide range of media types

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:

PropDescription
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
previewA boolean prop that controls showing a static image preview instead of displaying the token media
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.
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
  • wav, mp3
  • gltf, glb
  • png, jpeg, jpg, gif, svg
  • html

Usage

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

...

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

	return (tokens.map((token, i) => (
    <TokenMedia
      key={i}
      token={token?.token}
    />
  )))

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 (tokens.map((token, i) => {
   	const mediaType = extractMediaType(token) 
    
    if (mediaType === 'mp4') {
      return <CustomVideoComponent/>
    }
    
		return (<TokenMedia
      key={i}
      token={token?.token}
    />)
  }))