@react-visual/next NPM

@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)

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`	`Function`	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.