@react-visual

A monorepo hosting components for rendering image and video in a single container for easy rendering of visual elements.

• @react-visual/react - Vanilla implementation.
• @react-visual/contentful - Adapter for Contentful assets.
• @react-visual/next - Uses the next/image component for rendering images.
• @react-visual/sanity-next - Takes Sanity asset and passes them to @react-visual/next for rendering.

Examples

@react-visual/react

Using sourceTypes and sourceMedia with imageLoader to produce multiple <source> tags with srcset attributes.

import Visual from '@react-visual/react'

export default function ResponsiveExample() {
  return (
    <Visual
      image='https://placehold.co/200x200'
      sourceTypes={['image/webp']}
      sourceMedia={['(orientation:landscape)', '(orientation:portrait)']}
      imageLoader={({ src, type, media, width }) => {
        const height = media?.includes('landscape') ? width * 0.5 : width
        const ext = type?.includes('webp') ? '.webp' : ''
        return `https://placehold.co/${width}x${height}${ext}`
      }}
      width='100%'
      alt='Example of responsive images'/>
  )
}

View CodeSandbox demo

@react-visual/contentful

Using with a Visual entryType containing image and video fields:

import Visual from '@react-visual/contentful'

export default function Example() {
  return (
    <Visual
      src={ entry.background }
      sizes='100vw' />
  )
}

View CodeSandbox demo

@react-visual/next

Using framework adapter for Next.js:

import Visual from '@react-visual/next'

export default function Example() {
  return (
    <Visual
      image="https://placehold.co/1600x900.png"
      video="https://placehold.co/1600x900.mp4"
      aspect={16 / 9}
      sizes='100vw'
      alt='Example using placeholder assets' />
  )
}

View CodeSandbox demo

@react-visual/sanity-next

Using Sanity + Next.js Adapter to automatically populate aspect ratio, alt, blurred placeholder, and support both image and video in one object:

import Visual from '@react-visual/sanity-next'

export default function Example({ background }) {
  return <Visual src={ background } sizes='100vw' />
}

Contributing

This project uses Lerna to release versions, using the default versioning strategy.

• yarn lerna run test - Run all tests
• yarn lerna version - Tag a new version
• yarn lerna publish [major|minor|patch] - Tag and publish a version
• yarn lerna publish from-package - Publish the current version