Merge pull request #31 from mnogueron/feature/storybook-demo

Add story for Instagram like pinch to zoom and release

stories/Demo.stories.js

@@ -0,0 +1,40 @@
+import React, { useRef } from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { withKnobs } from '@storybook/addon-knobs';
+import PanZoom from '../src/PanZoom'
+import Picture from './john-westrock-638048-unsplash.jpg'
+
+const InstagramDemo = () => {
+  const ref = useRef(null)
+
+  function onPanEnd() {
+    ref.current.reset()
+  }
+
+  return (
+    <PanZoom
+      ref={ref}
+      style={{ border: 'solid 1px green', height: 300, width: 300 }}
+      minZoom={1}
+      maxZoom={2}
+      autoCenterZoomLevel={1}
+      realPinch
+      onPanEnd={onPanEnd}
+    >
+      <div
+        style={{
+          width: 300,
+          height: 300,
+          backgroundImage: `url('${Picture}')`,
+          backgroundPosition: 'center',
+          backgroundSize: 'cover',
+        }}
+      />
+    </PanZoom>
+  )
+}
+
+storiesOf('Demo', module)
+  .addDecorator(withKnobs)
+  .add('Instagram pinch to zoom', () => <InstagramDemo />)

stories/PanZoom.stories.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef } from 'react'
 
 import { storiesOf } from '@storybook/react'
 import { withKnobs, boolean, number } from '@storybook/addon-knobs';
@@ -226,17 +226,15 @@ storiesOf('react-easy-panzoom', module)
   ))
   .add('onStateChange handler', () => {
     return (
-      <>
-        <DefaultPanZoom
-          onStateChange={(data) => {
-           console.log(data)
-          }}     
-        >
-          <Box>
-            Open the console then move me
-          </Box>
-        </DefaultPanZoom>
-      </>
+      <DefaultPanZoom
+        onStateChange={(data) => {
+         console.log(data)
+        }}
+      >
+        <Box>
+          Open the console then move me
+        </Box>
+      </DefaultPanZoom>
     )
   })
   .add('autoCenter animate option', () => <AutoCenterDemo animate={boolean('Animate auto center', true)} />)