Skip to content

BKWLD/react-visual

Folders and files

NameName
Last commit message
Last commit date

Latest commit

14ac35f · Sep 30, 2024
Aug 14, 2024
Sep 30, 2024
Aug 8, 2023
Aug 10, 2023
Aug 14, 2024
Aug 4, 2023
Nov 30, 2023
Sep 9, 2024
Sep 30, 2024
Sep 30, 2024
Sep 30, 2024
Sep 30, 2024
Sep 30, 2024

Repository files navigation

@react-visual react-visual

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

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|path] - Tag and publish a version
  • yarn lerna publish from-package - Publish the current version