https://github.com/bettertyped/react-zoom-pan-pinch

🖼 React library to support easy zoom, pan, pinch on various html dom elements like <img> and <div>
https://github.com/bettertyped/react-zoom-pan-pinch

figma gesture html-manipulation miro pan pinch react react-component svg zoom zoomin zoomout

Last synced: 2 days ago
JSON representation

🖼 React library to support easy zoom, pan, pinch on various html dom elements like <img> and <div>

• Host: GitHub
• URL: https://github.com/bettertyped/react-zoom-pan-pinch
• Owner: BetterTyped
• License: mit
• Created: 2019-07-14T14:34:27.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-15T10:12:02.000Z (5 months ago)
• Last Synced: 2024-05-21T04:16:51.953Z (4 months ago)
• Topics: figma, gesture, html-manipulation, miro, pan, pinch, react, react-component, svg, zoom, zoomin, zoomout
• Language: TypeScript
• Homepage:
• Size: 13.8 MB
• Stars: 1,340
• Watchers: 8
• Forks: 257
• Open Issues: 114
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: Contributing.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: Code_of_Conduct.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# 🖼 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 (

    

      

        

      

    

  );

};

```

or

```jsx

import React, { Component } from "react";

import {

  TransformWrapper,

  TransformComponent,

  useControls,

} from "react-zoom-pan-pinch";

const Controls = () => {

  const { zoomIn, zoomOut, resetTransform } = useControls();

  return (

    


       zoomIn()}>+

       zoomOut()}>-

       resetTransform()}>x

    

  );

};


const Example = () => {

  return (

    

      {({ zoomIn, zoomOut, resetTransform, ...rest }) => (

        <>

          

          

            

            
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