From 4ab051afa9703f3edde2d2ea02210871ff1fc082 Mon Sep 17 00:00:00 2001 From: kingdido999 Date: Sat, 4 Nov 2017 12:24:14 -0700 Subject: [PATCH] Add react example --- docs/README.md | 2 -- docs/advanced-usage.md | 12 +++++++++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/docs/README.md b/docs/README.md index cbd18881..037ecf08 100644 --- a/docs/README.md +++ b/docs/README.md @@ -36,8 +36,6 @@ At this point, any image with attribute `data-action="zoom"` is zoomable by defa ``` -If you click while holding your meta key (`⌘` or `Ctrl`), it opens the image in a new tab. - ## Examples The source code of [demo](http://desmonding.me/zooming/) page is a simple demonstration on how to integrate Zooming and personalize it on your web page. Take a look at [index.html](https://github.com/kingdido999/zooming/blob/master/index.html) and [demo/js/custom.js](https://github.com/kingdido999/zooming/blob/master/demo/js/custom.js). diff --git a/docs/advanced-usage.md b/docs/advanced-usage.md index de267cee..3843b905 100644 --- a/docs/advanced-usage.md +++ b/docs/advanced-usage.md @@ -56,4 +56,14 @@ const zoomingDark = new Zooming({ zoomingLight.config({ // ... }) -``` \ No newline at end of file +``` + +## Open the image in a new tab + +Click while holding your meta key (`⌘` or `Ctrl`). + +## Working with React + +Please see this [example](https://github.com/kingdido999/atogatari/blob/master/client/src/components/ZoomableImage.js). + +Notice that it's best to pass in an initialized `zooming` instance as a prop to your component and use that instance to listen to your images within `componentDidMount` method. In this way, we don't create new `zooming` instances everytime the component rerendered. \ No newline at end of file