{"id":21525795,"url":"https://github.com/bkwld/react-visual","last_synced_at":"2026-05-09T20:16:02.198Z","repository":{"id":187136099,"uuid":"674615459","full_name":"BKWLD/react-visual","owner":"BKWLD","description":"Renders images and videos into a container.","archived":false,"fork":false,"pushed_at":"2024-11-20T17:57:16.000Z","size":643,"stargazers_count":1,"open_issues_count":5,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-05T10:02:05.357Z","etag":null,"topics":["image","lazy-loading","nextjs","sanity","video"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/p/sandbox/react-visual-next-demo-8lwxl9","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BKWLD.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-04T11:24:44.000Z","updated_at":"2024-11-20T17:57:35.000Z","dependencies_parsed_at":"2023-11-30T07:25:17.639Z","dependency_job_id":"7f6d523a-9f10-40f8-966a-418450ab6784","html_url":"https://github.com/BKWLD/react-visual","commit_stats":null,"previous_names":["bkwld/next-visual","bkwld/react-visual"],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Freact-visual","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Freact-visual/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Freact-visual/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Freact-visual/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BKWLD","download_url":"https://codeload.github.com/BKWLD/react-visual/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244085008,"owners_count":20395523,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image","lazy-loading","nextjs","sanity","video"],"created_at":"2024-11-24T01:38:30.386Z","updated_at":"2025-11-25T21:03:19.955Z","avatar_url":"https://github.com/BKWLD.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @react-visual [![react-visual](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/fn6c7w\u0026style=flat\u0026logo=cypress)](https://cloud.cypress.io/projects/fn6c7w/runs)\n\nA monorepo hosting components for rendering image and video in a single container for easy rendering of visual elements.\n\n- [@react-visual/react](./packages/react) - Vanilla implementation.\n- [@react-visual/contentful](./packages/contentful) - Adapter for Contentful assets.\n- [@react-visual/next](./packages/next) - Uses the `next/image` component for rendering images.\n- [@react-visual/sanity-next](./packages/sanity-next) - Takes Sanity asset and passes them to `@react-visual/next` for rendering.\n\n## Examples\n\n### @react-visual/react\n\nUsing `sourceTypes` and `sourceMedia` with `imageLoader` to produce multiple `\u003csource\u003e` tags with `srcset` attributes.\n\n```jsx\nimport Visual from '@react-visual/react'\n\nexport default function ResponsiveExample() {\n  return (\n    \u003cVisual\n      image='https://placehold.co/200x200'\n      sourceTypes={['image/webp']}\n      sourceMedia={['(orientation:landscape)', '(orientation:portrait)']}\n      imageLoader={({ src, type, media, width }) =\u003e {\n        const height = media?.includes('landscape') ? width * 0.5 : width\n        const ext = type?.includes('webp') ? '.webp' : ''\n        return `https://placehold.co/${width}x${height}${ext}`\n      }}\n      width='100%'\n      alt='Example of responsive images'/\u003e\n  )\n}\n```\n\n[View CodeSandbox demo](https://codesandbox.io/p/sandbox/react-visual-react-demo-w4sh62)\n\n### @react-visual/contentful\n\nUsing with a Visual entryType containing image and video fields:\n\n```jsx\nimport Visual from '@react-visual/contentful'\n\nexport default function Example() {\n  return (\n    \u003cVisual\n      src={ entry.background }\n      sizes='100vw' /\u003e\n  )\n}\n```\n\n[View CodeSandbox demo](https://codesandbox.io/p/devbox/react-visual-contentful-demo-gmxg7d)\n\n### @react-visual/next\n\nUsing framework adapter for Next.js:\n\n```jsx\nimport Visual from '@react-visual/next'\n\nexport default function Example() {\n  return (\n    \u003cVisual\n      image=\"https://placehold.co/1600x900.png\"\n      video=\"https://placehold.co/1600x900.mp4\"\n      aspect={16 / 9}\n      sizes='100vw'\n      alt='Example using placeholder assets' /\u003e\n  )\n}\n```\n\n[View CodeSandbox demo](https://codesandbox.io/p/sandbox/react-visual-next-demo-8lwxl9)\n\n### @react-visual/sanity-next\n\nUsing Sanity + Next.js Adapter to automatically populate aspect ratio, alt, blurred placeholder, and support both image and video in one object:\n\n```jsx\nimport Visual from '@react-visual/sanity-next'\n\nexport default function Example({ background }) {\n  return \u003cVisual src={ background } sizes='100vw' /\u003e\n}\n```\n\n## Contributing\n\nThis project uses Lerna to release versions, using [the default versioning strategy](https://lerna.js.org/docs/features/version-and-publish#versioning-strategies).\n\n- `yarn lerna run test` - Run all tests\n- `yarn lerna version` - Tag a new version\n- `yarn lerna publish [major|minor|patch]` - Tag and publish a version\n- `yarn lerna publish from-package` - Publish the current version\n\n### Test Videos\n\nplaceholder.co dropped it's APIs for generating test videos so I've been using this command to create videos for tests:\n\n```sh\nffmpeg -f lavfi -i color=c=black:s=300x150:d=5 \\\n  -vf \"drawtext=text='Hello World':fontcolor=white:fontsize=32:x=(w-text_w)/2:y=(h-text_h)/2\" \\\n  -c:v libx264 -t 5 -pix_fmt yuv420p 300x150.mp4\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkwld%2Freact-visual","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbkwld%2Freact-visual","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkwld%2Freact-visual/lists"}