https://github.com/bkwld/react-visual
Renders images and videos into a container.
https://github.com/bkwld/react-visual
image lazy-loading nextjs sanity video
Last synced: 3 months ago
JSON representation
Renders images and videos into a container.
- Host: GitHub
- URL: https://github.com/bkwld/react-visual
- Owner: BKWLD
- License: mit
- Created: 2023-08-04T11:24:44.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-20T17:57:16.000Z (over 1 year ago)
- Last Synced: 2025-03-05T10:02:05.357Z (over 1 year ago)
- Topics: image, lazy-loading, nextjs, sanity, video
- Language: TypeScript
- Homepage: https://codesandbox.io/p/sandbox/react-visual-next-demo-8lwxl9
- Size: 628 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @react-visual [](https://cloud.cypress.io/projects/fn6c7w/runs)
A monorepo hosting components for rendering image and video in a single container for easy rendering of visual elements.
- [@react-visual/react](./packages/react) - Vanilla implementation.
- [@react-visual/contentful](./packages/contentful) - Adapter for Contentful assets.
- [@react-visual/next](./packages/next) - Uses the `next/image` component for rendering images.
- [@react-visual/sanity-next](./packages/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 `` tags with `srcset` attributes.
```jsx
import Visual from '@react-visual/react'
export default function ResponsiveExample() {
return (
{
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](https://codesandbox.io/p/sandbox/react-visual-react-demo-w4sh62)
### @react-visual/contentful
Using with a Visual entryType containing image and video fields:
```jsx
import Visual from '@react-visual/contentful'
export default function Example() {
return (
)
}
```
[View CodeSandbox demo](https://codesandbox.io/p/devbox/react-visual-contentful-demo-gmxg7d)
### @react-visual/next
Using framework adapter for Next.js:
```jsx
import Visual from '@react-visual/next'
export default function Example() {
return (
)
}
```
[View CodeSandbox demo](https://codesandbox.io/p/sandbox/react-visual-next-demo-8lwxl9)
### @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:
```jsx
import Visual from '@react-visual/sanity-next'
export default function Example({ background }) {
return
}
```
## Contributing
This project uses Lerna to release versions, using [the default versioning strategy](https://lerna.js.org/docs/features/version-and-publish#versioning-strategies).
- `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
### Test Videos
placeholder.co dropped it's APIs for generating test videos so I've been using this command to create videos for tests:
```sh
ffmpeg -f lavfi -i color=c=black:s=300x150:d=5 \
-vf "drawtext=text='Hello World':fontcolor=white:fontsize=32:x=(w-text_w)/2:y=(h-text_h)/2" \
-c:v libx264 -t 5 -pix_fmt yuv420p 300x150.mp4
```