Merge pull request #9 from Moinax/master

Fix example so it uses the right component ReactPinchZoomPan and add initialScale property

Author: pinoniq

README.md

@@ -48,7 +48,7 @@ and open [localhost:3001](http://localhost:3001)
 ```
 import React, {Component} from 'react'
 import s from 'react-prefixr'
-import {PinchPanZoom} from 'react-pinch-zoom-pan'
+import {ReactPinchPanZoom} from 'react-pinch-zoom-pan'
 
 export default class App extends Component {
   
@@ -76,7 +76,7 @@ export default class App extends Component {
     const {height,width} = this.props
     const ratio = (height / width) * 100
     return (
-      <PinchPanZoom maxScale={2} render={obj => {
+      <ReactPinchPanZoom maxScale={2} render={obj => {
         return (
           <div style={this.getContainerStyle(ratio)}>
             <div style={this.getInnerStyle()}>
@@ -110,6 +110,19 @@ The component exposes 2 event listeners: `onPinchStart` and `onPinchStop`. These
   }} />
 </PinchView>
 ```
+### Usage initial scale
+
+The component exposes a prop to set the `initialScale`. This can be used to display the content with zoomed in by default
+
+```
+<PinchView debug backgroundColor='#ddd' initalScale={2} maxScale={4} containerRatio={100}>
+  <img src={'http://lorempixel.com/400/600/nature/'} style={{
+    margin: 'auto',
+    width: 'auto',
+    height: '100%'
+  }} />
+</PinchView>
+```
 
 ## Discussion
 

demo/App.js

@@ -31,6 +31,15 @@ export default class App extends Component {
             height: '100%'
           }} />
         </PinchView>
+        <h2>Initial scale</h2>
+        <p>This allow you to display the content scaled (zoom x2)</p>
+        <PinchView debug backgroundColor='#ddd' initialScale={2} maxScale={4} containerRatio={100} onPinchStart={() => console.log('pinch started')} onPinchStop={() => console.log('pinch stopped')}>
+          <img src={'http://lorempixel.com/400/600/nature/'} style={{
+            margin: 'auto',
+            width: 'auto',
+            height: '100%'
+          }} />
+        </PinchView>
       </div>
     )
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pinch-zoom-pan",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A react component that lets you add pinch-zoom and pan sub components",
   "main": "lib/index.js",
   "scripts": {

src/PinchView.js

@@ -51,9 +51,9 @@ class PinchView extends Component {
   }
 
   render () {
-    const {debug, maxScale, holderClassName, containerClassName, children, onPinchStart, onPinchStop} = this.props
+    const {debug, initialScale, maxScale, holderClassName, containerClassName, children, onPinchStart, onPinchStop} = this.props
     return (
-      <ReactPinchZoomPan maxScale={maxScale} render={(obj) => {
+      <ReactPinchZoomPan initialScale={initialScale} maxScale={maxScale} render={(obj) => {
         return (
           <div style={this.getHolderStyle()} className={holderClassName}>
             <div style={this.getContainerStyle()} className={containerClassName}>
@@ -72,6 +72,7 @@ class PinchView extends Component {
 }
 
 PinchView.defaultProps = {
+  initialScale: 1,
   maxScale: 2,
   containerRatio: 100,
   backgroundColor: '#f2f2f2',
@@ -80,6 +81,7 @@ PinchView.defaultProps = {
 
 PinchView.propTypes = {
   containerRatio: PropTypes.number,
+  initialScale: PropTypes.number,
   maxScale: PropTypes.number,
   children: PropTypes.element,
   containerClassName: PropTypes.string,

src/ReactPinchZoomPan.js

@@ -45,7 +45,7 @@ class ReactPinchZoomPan extends Component {
     super(props)
     this.state = {
       obj: {
-        scale: 1,
+        scale: props.initialScale,
         x: 0,
         y: 0
       },
@@ -191,13 +191,15 @@ class ReactPinchZoomPan extends Component {
 }
 
 ReactPinchZoomPan.defaultProps = {
+  initialScale: 1,
   maxScale: 2
 }
 
 ReactPinchZoomPan.propTypes = {
   render: PropTypes.func,
   onPinchStart: PropTypes.func,
   onPinchStop: PropTypes.func,
+  initialScale: PropTypes.number,
   maxScale: PropTypes.number
 }