# react-video-zoom

> React component for magnifying glass circle on a video when hovering.

Latest version **1.0.11** (published 2023-04-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-video-zoom
pnpm add react-video-zoom
yarn add react-video-zoom
bun add react-video-zoom
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2023-04-19 |
| First published | 2023-03-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Max Gajek |
| Maintainers | max21994 |
| Keywords | react, video, zoom, magnifier, magnifying glass, enlarger, video zoom, video magnifier, video enlarger, video magnifying glass |

## Links

- npm: https://www.npmjs.com/package/react-video-zoom
- Repository: https://github.com/max21994/react-video-zoom
- Homepage: https://react-video-zoom-github-io.vercel.app
- Issues: https://github.com/max21994/react-video-zoom/issues
- npm.io page: https://npm.io/package/react-video-zoom

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.11 (latest) — 2023-04-19
- 1.0.10 — 2023-04-05
- 1.0.9 — 2023-04-05
- 1.0.8 — 2023-03-26
- 1.0.7 — 2023-03-26
- 1.0.6 — 2023-03-25
- 1.0.5 — 2023-03-25
- 1.0.4 — 2023-03-25
- 1.0.3 — 2023-03-25
- 1.0.2 — 2023-03-25
- 1.0.1 — 2023-03-25
- 1.0.0 — 2023-03-25

## README

# react-video-zoom

## Overview

React component for magnifying glass circle on a video when hovering.

## Demo

[Demo](https://react-video-zoom-github-io.vercel.app/)

## Install

```
npm install react-video-zoom --save
```

## Usage

```JSX
import {
  ReactVideoZoom,
  pauseReactVideoZoom,
  playReactVideoZoom,
} from "react-video-zoom";
import { useRef } from "react";
import VideoPath from "./test_video.mp4";

function App() {
    const mainVideoRef = useRef<HTMLVideoElement>(null);
    const zoomVideoRef = useRef<HTMLVideoElement>(null);

    const refs = { mainVideoRef, zoomVideoRef };

    return (
        <>
            <ReactVideoZoom
                src={VideoPath}
                zoom={zoom}
                refs={refs}
                width={1000}
                loop
                muted
            />
            <div onClick={() => playReactVideoZoom(refs)}>Play</div>
            <div onClick={() => pauseReactVideoZoom(refs)}>Pause</div>
        </>
    )
}
```

## Properties of `<ReactVideoZoom />` component

| Property | Type               | Is required | Description                        |
| -------- | ------------------ | ----------- | ---------------------------------- |
| src      | string             | Requred     | Source of the video                |
| zoom     | number             | Requred     | Magnification value                |
| refs     | ReactVideoZoomRefs | Requred     | Object of React ref objects        |
| width    | number             | Optional    | Width of the video in pixels       |
| loop     | boolean            | Optional    | When true, video will play on loop |
| muted    | boolean            | Optional    | When true, video will be muted     |

## `playReactVideoZoom(refs)` and `pauseReactVideoZoom(refs)` playback control functions

The package also exports 2 playback control functions for playing and pausing the videos in sync. Object `refs` of type `ReactVideoZoomRefs` must be passed as an argument to both of them.

## `ReactVideoZoomRefs` type

The `refs` object that is passed to `<ReactVideoZoom />` component and playback control functions must be of the following type:

```typescript
type ReactVideoZoomRefs = {
  mainVideoRef: React.RefObject<HTMLVideoElement>;
  zoomVideoRef: React.RefObject<HTMLVideoElement>;
};
```

---
_Source: https://npm.io/package/react-video-zoom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._