docs(react): update example to React hooks

README.md

@@ -354,11 +354,7 @@ zoom.open().then(() => {
 Specifies the high definition image to open on zoom. This image loads when the user clicks on the source image.
 
 ```html
-<img
-  src="image-thumbnail.jpg"
-  data-zoom-src="image-hd.jpg"
-  alt="My image"
->
+<img src="image-thumbnail.jpg" data-zoom-src="image-hd.jpg" alt="My image" />
 ```
 
 ### Events
@@ -437,6 +433,35 @@ mediumZoom($('[data-zoomable]').toArray())
 <details>
  <summary>Create a zoomable React component</summary>
 
+**Using React hooks**
+
+```js
+import React from 'react'
+import mediumZoom from 'medium-zoom'
+
+function ImageZoom({ zoom, src, alt, background }) {
+  const zoomRef = React.useRef(zoom.clone({ background }))
+
+  function attachZoom(image) {
+    zoomRef.current.attach(image)
+  }
+
+  return <img src={src} alt={alt} ref={attachZoom} />
+}
+
+function App() {
+  const zoom = React.useRef(mediumZoom({ background: '#000', margin: 48 }))
+
+  render() {
+    return (
+      <ImageZoom src="image.jpg" alt="Image" zoom={zoom.current} color="#BADA55" />
+    )
+  }
+}
+```
+
+**Using React classes**
+
 ```js
 import React, { Component } from 'react'
 import mediumZoom from 'medium-zoom'

examples/react/package.json

@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "medium-zoom": "1.0.4",
-    "parcel-bundler": "1.11.0",
-    "react": "16.7.0",
-    "react-dom": "16.7.0",
+    "parcel-bundler": "1.12.4",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-scripts": "1.1.5"
   }
 }

examples/react/src/App.js

@@ -1,55 +1,49 @@
-import React, { Component } from 'react'
+import React from 'react'
 import mediumZoom from 'medium-zoom'
-import Image from './Image'
-
-class App extends Component {
-  zoom = mediumZoom()
-
-  attachZoom = image => {
-    this.zoom.attach(image)
-  }
-
-  render() {
-    return (
-      <article className="container">
-        <h1>React demo</h1>
-
-        <Image
-          src="images/image-1.jpg"
-          alt="Zoom 1"
-          zoom={this.zoom}
-          background="#000"
-        />
-
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora
-          praesentium cupiditate fugit voluptas, rem eligendi, voluptatem
-          molestias. Doloremque sit voluptatum odio maiores provident
-          consequuntur accusantium saepe.
-        </p>
-
-        <Image
-          src="images/image-2.jpg"
-          alt="Zoom 2"
-          zoom={this.zoom}
-          background="red"
-        />
-
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores
-          quaerat, quis modi nostrum sequi adipisci ratione esse blanditiis
-          error beatae vel non vero dolor nemo. Animi nemo quisquam ducimus!
-        </p>
-
-        <Image
-          src="images/image-3.jpg"
-          alt="Zoom 3"
-          zoom={this.zoom}
-          background="yellow"
-        />
-      </article>
-    )
-  }
+import ImageZoom from './ImageZoom'
+
+function App() {
+  const zoom = React.useRef(mediumZoom())
+
+  return (
+    <article className="container">
+      <h1>React demo</h1>
+
+      <ImageZoom
+        src="images/image-1.jpg"
+        alt="Zoom 1"
+        zoom={zoom.current}
+        background="#000"
+      />
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora
+        praesentium cupiditate fugit voluptas, rem eligendi, voluptatem
+        molestias. Doloremque sit voluptatum odio maiores provident consequuntur
+        accusantium saepe.
+      </p>
+
+      <ImageZoom
+        src="images/image-2.jpg"
+        alt="Zoom 2"
+        zoom={zoom.current}
+        background="red"
+      />
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores
+        quaerat, quis modi nostrum sequi adipisci ratione esse blanditiis error
+        beatae vel non vero dolor nemo. Animi nemo quisquam ducimus!
+      </p>
+
+      <ImageZoom
+        src="images/image-3.jpg"
+        alt="Zoom 3"
+        zoom={zoom.current}
+        background="yellow"
+      />
+    </article>
+  )
 }
 
 export default App

examples/react/src/ImageZoom.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+function ImageZoom({ zoom, src, alt, background }) {
+  const zoomRef = React.useRef(zoom.clone({ background }))
+
+  function attachZoom(image) {
+    zoomRef.current.attach(image)
+  }
+
+  return <img src={src} alt={alt} ref={attachZoom} />
+}
+
+export default ImageZoom