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

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>
     );
   }

./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

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

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

• 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

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

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

see the LICENSE file for details

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