style: 💄 Readme update

README.md

@@ -91,76 +91,39 @@ or
 ```jsx
 import React, { Component } from "react";
 
-import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
-
-const Example = () => {
-  return (
-    <TransformWrapper
-      initialScale={1}
-      initialPositionX={200}
-      initialPositionY={100}
-    >
-      {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
-        <React.Fragment>
-          <div className="tools">
-            <button onClick={() => zoomIn()}>+</button>
-            <button onClick={() => zoomOut()}>-</button>
-            <button onClick={() => resetTransform()}>x</button>
-          </div>
-          <TransformComponent>
-            <img src="image.jpg" alt="test" />
-            <div>Example text</div>
-          </TransformComponent>
-        </React.Fragment>
-      )}
-    </TransformWrapper>
-  );
-};
-```
-
-or
-
-```tsx
-import React, { useRef } from "react";
 import {
   TransformWrapper,
   TransformComponent,
-  ReactZoomPanPinchRef,
+  useControls,
 } from "react-zoom-pan-pinch";
 
-const Controls = ({ zoomIn, zoomOut, resetTransform }) => (
-  <>
-    <button onClick={() => zoomIn()}>+</button>
-    <button onClick={() => zoomOut()}>-</button>
-    <button onClick={() => resetTransform()}>x</button>
-  </>
-);
-
-const Component = () => {
-  const transformComponentRef = useRef<ReactZoomPanPinchRef | null>(null);
+const Controls = () => {
+  const { zoomIn, zoomOut, resetTransform } = useControls();
 
-  const zoomToImage = () => {
-    if (transformComponentRef.current) {
-      const { zoomToElement } = transformComponentRef.current;
-      zoomToElement("imgExample");
-    }
-  };
+  return (
+    <div className="tools">
+      <button onClick={() => zoomIn()}>+</button>
+      <button onClick={() => zoomOut()}>-</button>
+      <button onClick={() => resetTransform()}>x</button>
+    </div>
+  );
+};
 
+const Example = () => {
   return (
     <TransformWrapper
       initialScale={1}
       initialPositionX={200}
       initialPositionY={100}
-      ref={transformComponentRef}
     >
-      {(utils) => (
-        <React.Fragment>
-          <Controls {...utils} />
+      {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
+        <>
+          <Controls />
           <TransformComponent>
-            <img src="image.jpg" alt="test" id="imgExample" />
-            <div onClick={zoomToImage}>Example text</div>
+            <img src="image.jpg" alt="test" />
+            <div>Example text</div>
           </TransformComponent>
-        </React.Fragment>
+        </>
       )}
     </TransformWrapper>
   );