next

@react-visual/next

Renders images and videos into a container. Features:

• Uses next/image to render images
• Easily render assets using aspect ratios
• Videos are lazyloaded (unless priority flag is set)
• Adds play/pause toggle for videos for ADA compliance

Install

yarn add @react-visual/next

Images will be rendered using next/image so expect to do configuration of remotePatterns for CMS hosted images.

Usage

import Visual from '@react-visual/next'

export default function Example() {
  return (
    <Visual
      image='https://placehold.co/300x150'
      video='https://placehold.co/300x150.mp4'
      aspect={300/150}
      sizes='100vw'
      alt='Example using placeholder images' />
  )
}

For more examples, read the Cypress component tests.

Props

Sources

Prop	Type	Description
image	string	URL to an image asset.
video	string	URL to a video asset asset.
placeholderData	string	A Data URL that is rendered before the image loads via next/image's blurDataURL.

Layout

Prop	Type	Description
expand	boolean	Make the Visual fill it's container via CSS using absolute positioning.
aspect	number	Force the Visual to a specific aspect ratio.
width	number, string	A CSS dimension value or a px number.
height	number, string	A CSS dimension value or a px number.
fit	string	An object-fit value that is applied to the assets. Defaults to cover.
position	string	An object-position value.

Loading

Prop	Type	Description
priority	boolean	Sets next/image's priority and videos to not lazy load.
sizes	string	Sets next/image's sizes prop.
imageLoader	ImageLoader	This is passed through to next/image's loader prop.

Video

Prop	Type	Description
paused	boolean	Disables autoplay of videos. This prop is reactive, unlike the paused property of the html <video> tag. You can set it to true to pause a playing video or set it to false to play a paused video.
onPause	Function	Invoked whenever the video fires a pause event.
onPlay	Function	Invoked whenever the video fires a play event.
playIcon	ComponentType	Replace the play icon used with accessibility controls.
pauseIcon	ComponentType	Replace the pause icon used with accessibility controls.

Accessibility

Prop	Type	Description
alt	string	Sets the alt attribute or aria-label value, depending on asset type.
hideAccessibilityControls	boolean	Removes the play/pause toggle on videos.
accessibilityControlsPosition	PositionOption	Controls the position of the accessibility controls. Defaults to bottom left.

Theming

Prop	Type	Description
className	string	Add a custom CSS class.
style	CSSProperties	Add additional styles.