{"id":19433075,"url":"https://github.com/pariazar/media-view-react","last_synced_at":"2025-02-25T06:18:51.773Z","repository":{"id":193554024,"uuid":"689017660","full_name":"pariazar/media-view-react","owner":"pariazar","description":"Streamlined media preview and interaction. Display images and videos effortlessly with touch gestures, zoom, and panning. Create dynamic galleries, carousels, and engaging media presentations for React applications. Elevate your media viewing experience.","archived":false,"fork":false,"pushed_at":"2023-09-08T15:48:04.000Z","size":1972,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-07T20:48:47.271Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pariazar.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}},"created_at":"2023-09-08T15:46:28.000Z","updated_at":"2023-09-08T15:48:08.000Z","dependencies_parsed_at":"2023-09-08T18:25:00.666Z","dependency_job_id":null,"html_url":"https://github.com/pariazar/media-view-react","commit_stats":null,"previous_names":["pariazar/media-view-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pariazar%2Fmedia-view-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pariazar%2Fmedia-view-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pariazar%2Fmedia-view-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pariazar%2Fmedia-view-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pariazar","download_url":"https://codeload.github.com/pariazar/media-view-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240612842,"owners_count":19829086,"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":[],"created_at":"2024-11-10T14:38:26.607Z","updated_at":"2025-02-25T06:18:51.750Z","avatar_url":"https://github.com/pariazar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# media-view-react\n\n**English**\n\n**Modern React media preview component.**\n\n[![NPM version][npm-image]][npm-url]\n[![Downloads][downloads-image]][downloads-url]\n[![Minified size][min-size-image]][bundlephobia-url]\n[![Gzip size][gzip-size-image]][bundlephobia-url]\n\n## Quick start\n\n- [Getting Started](https://media-view-react.vercel.app)\n- [Basic usage](https://media-view-react.vercel.app/docs/getting-started)\n- [API](https://media-view-react.vercel.app/docs/api)\n- [Change log](https://media-view-react.vercel.app/docs/change-log)\n\n## features\n\n- Seamlessly incorporate touch gestures, enabling intuitive actions like dragging, panning with realistic physical effects, and effortless two-finger zooming in and out.\n- Elevate your animations with smooth transitions, including natural rebounding when opening and closing elements, ensuring a delightful user experience.\n- Ensure images are dynamically adaptive, optimizing initial rendering size and adjusting dynamically based on user modifications.\n- Extend versatility by supporting custom previews for any HTML element, `\u003cvideo\u003e` or any `HTML` element\n- Facilitate effortless keyboard navigation, making it an ideal choice for desktop users.\n- Empower users with custom node expansion, enabling features such as full-screen previews, rotation control, and image descriptions.\n- Based on `typescript`, `7KB Gzipped`, supports server-side rendering\n- Simple and easy to use `API`, zero cost to get started\n\n## Install\n\n```bash\nyarn add media-view-react\n```\n\n## Basic usage:\n\n```js\nimport { MediaProvider, MediaView } from 'media-view-react';\nimport 'media-view-react/dist/media-view-react.css';\n\nfunction App() {\n  return (\n    \u003cMediaProvider\u003e\n      \u003cdiv className=\"foo\"\u003e\n        {item.type === 'image' ? (\n          \u003cMediaView type=\"image\" src={item.src}\u003e\n            \u003cImage src={item.src} /\u003e\n          \u003c/MediaView\u003e\n        ) : (\n          \u003cMediaView type=\"video\" src={item.src}\u003e\n            {/*thumbnail of video it can be video or img html tag*/}\n            \u003cvideo src={item.src} /\u003e\n          \u003c/MediaView\u003e\n        )}\n      \u003c/div\u003e\n    \u003c/MediaProvider\u003e\n  );\n}\n```\n\n## License\n\nApache-2.0 © [pariazar](https://github.com/pariazar)\n\n[npm-image]: https://img.shields.io/npm/v/media-view-react.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/media-view-react\n[downloads-image]: http://img.shields.io/npm/dm/media-view-react.svg?style=flat-square\n[downloads-url]: https://npmjs.org/package/media-view-react\n[min-size-image]: https://badgen.net/bundlephobia/min/media-view-react?label=minified\n[gzip-size-image]: https://badgen.net/bundlephobia/minzip/media-view-react?label=gzip\n[bundlephobia-url]: https://bundlephobia.com/result?p=media-view-react\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpariazar%2Fmedia-view-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpariazar%2Fmedia-view-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpariazar%2Fmedia-view-react/lists"}