Merge pull request #908 from rpearce/chore/cut-release

chore: cut release

Author: rpearce

.all-contributorsrc

@@ -882,6 +882,15 @@
       "contributions": [
         "bug"
       ]
+    },
+    {
+      "login": "napstar-420",
+      "name": "Zohaib Khan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/100934169?v=4",
+      "profile": "https://github.com/napstar-420",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "repoType": "github",

.changeset/smooth-pillows-rhyme.md

@@ -0,0 +1,5 @@
+---
+"react-medium-image-zoom": minor
+---
+
+Added `isDisabled` prop; provided `isZoomImgLoaded` for `ZoomContent`

README.md

@@ -1,6 +1,6 @@
 # react-medium-image-zoom
 
-[![npm version](https://img.shields.io/npm/v/react-medium-image-zoom.svg)](https://www.npmjs.com/package/react-medium-image-zoom) [![react-medium-image-zoom bundlejs badge](https://deno.bundlejs.com/?q=react-medium-image-zoom&badge=&config={%22esbuild%22:{%22external%22:[%22react%22,%22react-dom%22]}})](https://bundlejs.com/?q=react-medium-image-zoom) [![npm downloads](https://img.shields.io/npm/dm/react-medium-image-zoom.svg)](https://www.npmjs.com/package/react-medium-image-zoom) [![All Contributors](https://img.shields.io/badge/all_contributors-89-orange.svg)](#contributors-)
+[![npm version](https://img.shields.io/npm/v/react-medium-image-zoom.svg)](https://www.npmjs.com/package/react-medium-image-zoom) [![react-medium-image-zoom bundlejs badge](https://deno.bundlejs.com/?q=react-medium-image-zoom&badge=&config={%22esbuild%22:{%22external%22:[%22react%22,%22react-dom%22]}})](https://bundlejs.com/?q=react-medium-image-zoom) [![npm downloads](https://img.shields.io/npm/dm/react-medium-image-zoom.svg)](https://www.npmjs.com/package/react-medium-image-zoom) [![All Contributors](https://img.shields.io/badge/all_contributors-90-orange.svg)](#contributors-)
 
 The original [medium.com-inspired image zooming](https://medium.design/image-zoom-on-medium-24d146fc0c20)
 library for [React](https://reactjs.org).
@@ -286,13 +286,23 @@ export const MyImg = () => (
 )
 
 const CustomZoomContent = ({
-  buttonUnzoom,    // default unzoom button
-  modalState,      // current state of the zoom modal: UNLOADED, LOADING, LOADED, UNLOADING
-  img,             // your image, prepped for zooming
-  isZoomImgLoaded, // state to check if zoom img is loaded (useful to show loading)
-  //onUnzoom,      // unused here, but a callback to manually unzoom the image and
-                   //   close the modal if you want to use your own buttons or
-                   //   listeners in your custom experience
+  /** Default unzoom button */
+  buttonUnzoom,
+
+  /** Current state of the zoom modal: UNLOADED, LOADING, LOADED, UNLOADING */
+  modalState,
+
+  /** Your image, prepped for zooming */
+  img,
+
+  /** A state to check if the zoom img is loaded (useful for loading state) */
+  // isZoomImgLoaded,
+
+  /**
+   * A callback to manually unzoom the image and close the modal if you want to
+   * use your own buttons or listeners in your custom experience.
+   */
+  //onUnzoom,
 }) => {
   const [isLoaded, setIsLoaded] = useState(false)
 
@@ -467,6 +477,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/imalfect"><img src="https://avatars.githubusercontent.com/u/77974917?v=4?s=40" width="40px;" alt="iMalFect"/><br /><sub><b>iMalFect</b></sub></a><br /><a href="https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Aimalfect" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://upleveled.io/"><img src="https://avatars.githubusercontent.com/u/1935696?v=4?s=40" width="40px;" alt="Karl Horky"/><br /><sub><b>Karl Horky</b></sub></a><br /><a href="https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Akarlhorky" title="Bug reports">🐛</a> <a href="#ideas-karlhorky" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/rpearce/react-medium-image-zoom/pulls?q=is%3Apr+reviewed-by%3Akarlhorky" title="Reviewed Pull Requests">👀</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://wener.me/"><img src="https://avatars.githubusercontent.com/u/1777211?v=4?s=40" width="40px;" alt="陈杨文"/><br /><sub><b>陈杨文</b></sub></a><br /><a href="https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Awenerme" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/napstar-420"><img src="https://avatars.githubusercontent.com/u/100934169?v=4?s=40" width="40px;" alt="Zohaib Khan"/><br /><sub><b>Zohaib Khan</b></sub></a><br /><a href="https://github.com/rpearce/react-medium-image-zoom/commits?author=napstar-420" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package.json

@@ -35,7 +35,8 @@
     "Yida Zhang <[email protected]>",
     "eych",
     "tshmieldev",
-    "David Edler (https://github.com/edlerd)"
+    "David Edler (https://github.com/edlerd)",
+    "Zohaib Khan <[email protected]> (https://zohaib.is-a.dev)"
   ],
   "funding": [
     {

stories/Img.stories.tsx

@@ -320,7 +320,8 @@ const CustomZoomContent: UncontrolledProps['ZoomContent'] = ({
   buttonUnzoom,
   modalState,
   img,
-  //onUnzooom, // Not used here, but could be
+  // isZoomImgLoaded, // Not used in this example
+  // onUnzooom, // Not used in this example
 }) => {
   const [isLoaded, setIsLoaded] = React.useState(false)