# 🖼 React Zoom Pan Pinch > Super fast and light react npm package for zooming, panning and pinching html > elements in easy way

#### Sources - [Demo](https://BetterTyped.github.io/react-zoom-pan-pinch/?path=/story/examples-big-image--big-image) - [Docs](https://BetterTyped.github.io/react-zoom-pan-pinch/?path=/story/docs-props--page)

## Key Features - 🚀 Fast and easy to use - 🏭 Light, without external dependencies - 💎 Mobile gestures, touchpad gestures and desktop mouse events support - 🎁 Powerful context usage, which gives you a lot of freedom - 🔧 Highly customizable - 👑 Animations and Utils to create own tools - 🔮 Advanced hooks and components ## Try other BetterTyped projects Do you like this library? Try out other projects

**[⚡Hyper Fetch](https://github.com/BetterTyped/hyper-fetch)** - Fetching and realtime data exchange framework. --- ## Installation ```bash npm install --save react-zoom-pan-pinch or yarn add react-zoom-pan-pinch ```

## Examples ```jsx import React, { Component } from "react"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; const Example = () => { return ( test

); }; ``` or ```jsx import React, { Component } from "react"; import { TransformWrapper, TransformComponent, useControls, } from "react-zoom-pan-pinch"; const Controls = () => { const { zoomIn, zoomOut, resetTransform } = useControls(); return (

); }; const Example = () => { return ( {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( <> test

Example text

)} ); }; ```

## License MIT © [prc5](https://github.com/prc5) ## Help me keep working on this project ❤️ - [Become a Sponsor on GitHub](https://github.com/sponsors/prc5) ## 💖 Our sponsors

套件	下載數	Stars	大小	Issues	發布時間	許可

react-zoom-pan-pinch	500,152	1,681	441 kB	143	4 個月前	MIT