React Pinch and Zoom

A react container component with pinch-to-zoom gesture interaction.

Demo

Getting Started

Installing

1. Install this package as dependency

   # pwd: ~/project/dir
   $ npm install react-pinch-and-zoom

2. Import the component

   import PinchToZoom from 'react-pinch-and-zoom';

3. Wrap the pinch-able component inside PinchToZoom component

   render() {
     return (
       <div className="container">
         <PinchToZoom>
           <img src={...}/> // child node should have intrinsic size
         </PinchToZoom>
       </div>
     );
   }

Project structure

./react-pinch-and-zoom (master)
├── docs               // compiled github demo page
├── lib                // compiled react component in commonjs module (git ignored)
├── package.json
├── server.js          // config local development server
└── src
    ├── PinchToZoom    // source code of react-pinch-and-zoom
    └── demo           // source code of github demo page

Develop on local machine

1. Pull this repository

   # pwd: ~/development/dir
   $ git pull https://github.com/conradlo/react-pinch-and-zoom.git

2. Install dependency

   $ cd react-pinch-and-zoom
   # pwd: ~/development/dir/react-pinch-and-zoom
   $ npm install

3. Start local development server

   # pwd: ~/development/dir/react-pinch-and-zoom
   $ npm start

4. Visit localhost:3000 and edit src/PinchToZoom/*
5. Consult package.json for more npm script tasks

Production build

run npm run build will:

1. transpile the component's source code /lib
2. build and bundle the Github page /docs

# pwd: ~/development/dir/react-pinch-and-zoom
$ npm run build

Built With

• Reactjs - A JavaScript library for building user interfaces
• Sass - Syntactically Awesome Style Sheets
• Webpack - JavaScript module bundler
• Babel - JavaScript transpiler/compiler
• Typescript - For extra type safety
• eslint, tslint, prettier, vscode

Contributing

Please refer to CONTRIBUTING.md for details on code of conduct, and the process for submitting pull requests.

Versioning

This project uses SemVer for versioning. For the versions available, see the tags on this repository.

License

see the LICENSE file for details

Acknowledgments

• https://gist.github.com/PurpleBooth/109311bb0361f32d87a2