new-context-api

examples/dist/index.html

@@ -11,4 +11,4 @@
  onClose={this.closeImgsViewer}
  />
  </code>
- </pre> </section> <section id=options class=section-options> <h2>Options</h2> <div class=options-table-container> <table class=options-table> <thead> <tr> <th align=left>Property</th> <th align=left>Type</th> <th align=left>Default</th> <th align=left>Description</th> </tr> </thead> <tbody> <tr> <td align=left>backdropCloseable</td> <td align=left>bool</td> <td align=left>false</td> <td align=left>Allow users to exit the imgsViewer by clicking the backdrop</td> </tr> <tr> <td align=left>currImg</td> <td align=left>number</td> <td align=left>0</td> <td align=left>The index of the image to display initially</td> </tr> <tr> <td align=left>customControls</td> <td align=left>array</td> <td align=left>undefined</td> <td align=left>An array of elements to display as custom controls on the top of imgsViewer</td> </tr> <tr> <td align=left>enableKeyboardInput</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Supports keyboard input - <code>space, esc</code>, <code>arrow left, arrow up</code>, and <code>arrow right, arrow down</code> </td> </tr> <tr> <td align=left> <a href=#images>imgs</a> </td> <td align=left>array</td> <td align=left>undefined</td> <td align=left>Required. An array of objects containing valid src and srcset values of img element</td> </tr> <tr> <td align=left>imgCountSeparator</td> <td align=left>string</td> <td align=left>' / '</td> <td align=left>Custom separator for the image count</td> </tr> <tr> <td align=left>isOpen</td> <td align=left>bool</td> <td align=left>false</td> <td align=left>Whether or not the imgsViewer is displayed</td> </tr> <tr> <td align=left>onClickPrev</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Fired on request of the previous image</td> </tr> <tr> <td align=left>onClickNext</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Fired on request of the next image</td> </tr> <tr> <td align=left>onClickImg</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Handle click event on the current image</td> </tr> <tr> <td align=left>onClickThumbnail</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Handle click on thumbnail</td> </tr> <tr> <td align=left>onClose</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Required. Handle closing of the imgsViewer</td> </tr> <tr> <td align=left>preloadNextImg</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Whether to preload the next available image.</td> </tr> <tr> <td align=left>preventAutoScroll</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Determines whether auto-scrolling is prevented</td> </tr> <tr> <td align=left>showCloseBtn</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Optionally display a close "X" button in top right corner</td> </tr> <tr> <td align=left>showImgCount</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Optionally display image index, e.g., "3 of 20"</td> </tr> <tr> <td align=left>showThumbnails</td> <td align=left>bool</td> <td align=left>false</td> <td align=left>Optionally display thumbnails beneath the imgsViewer</td> </tr> <tr> <td align=left>theme</td> <td align=left>object</td> <td align=left>undefined</td> <td align=left>Pass through styles to theme each component; <code>arrow</code>, <code>container</code>, etc.</td> </tr> <tr> <td align=left>width</td> <td align=left>number</td> <td align=left>1024</td> <td align=left>Maximum width of the carousel; defaults to 1024px</td> </tr> </tbody> </table> </div> <h2>Images</h2> <div class=options-table-container id=images> <table class=options-table> <thead> <tr> <th align=left>Property</th> <th align=left>Type</th> <th align=left>Default</th> <th align=left>Description</th> </tr> </thead> <tbody> <tr> <td align=left>src</td> <td align=left>str</td> <td align=left>undefined</td> <td align=left>Required. The primary image path</td> </tr> <tr> <td align=left>srcset</td> <td align=left>arr</td> <td align=left>undefined</td> <td align=left>List of alternative image sizes</td> </tr> <tr> <td align=left>caption</td> <td align=left>str</td> <td align=left>undefined</td> <td align=left>Displayed benath the current image. Great for description or attribution</td> </tr> <tr> <td align=left>thumbnail</td> <td align=left>str</td> <td align=left>undefined</td> <td align=left>Thumbnail to display if <code>showThumbnails</code> is set to <code>true</code> </td> </tr> </tbody> </table> </div> </section> <section id=license class=section-license> <h2>License</h2> <p>React Images Viewer is free to use for personal and commercial projects under <a target=_blank href=https://github.com/guonanci/react-images-viewer/blob/master/LICENSE>the MIT license</a>.</p> <p>Attribution is not required, but greatly appreciated. It does not have to be user-facing and can remain within the code.</p> </section> <section id=help class=section-help> <h2>Help</h2> <h3>Have a question?</h3> <p>Follow the <a target=_blank href=https://github.com/guonanci/react-images-viewer#quick-start>quick start guide</a> on GitHub to get up and running quickly. Please do not use Github Issues to report personal support requests.</p> <h3>Found a bug?</h3> <p>If you find a bug, please read the <a target=_blank href=https://github.com/guonanci/react-images-viewer/blob/master/CONTRIBUTING.md>Contribution Guildelines</a> before you <a target=_blank href=https://github.com/guonanci/react-images-viewer/issues>report the issue</a>.</p> </section> </div> </div> </div> <footer class=page-footer> <span class=page-footer__copyright--small>Copyright </span> <span class=page-footer__copyright--large>&copy; </span> <a href=https://www.jianshu.com/u/1a404f3eb7d9 target=_blank>Guo Nanci</a> 2018 </footer> </div> </div> <script>document.getElementById("github-stars-button").dataset.style=480<window.innerWidth?"mega":null</script> <script src=common.js></script> <script src=app.js></script> <script async defer=defer id=github-bjs src=https://buttons.github.io/buttons.js></script> </body> 
+ </pre> </section> <section id=options class=section-options> <h2>Options</h2> <div class=options-table-container> <table class=options-table> <thead> <tr> <th align=left>Property</th> <th align=left>Type</th> <th align=left>Default</th> <th align=left>Description</th> </tr> </thead> <tbody> <tr> <td align=left>backdropCloseable</td> <td align=left>bool</td> <td align=left>false</td> <td align=left>Allow users to exit the imgsViewer by clicking the backdrop</td> </tr> <tr> <td align=left>currImg</td> <td align=left>number</td> <td align=left>0</td> <td align=left>The index of the image to display initially</td> </tr> <tr> <td align=left>customControls</td> <td align=left>array</td> <td align=left>undefined</td> <td align=left>An array of elements to display as custom controls on the top of imgsViewer</td> </tr> <tr> <td align=left>enableKeyboardInput</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Supports keyboard input - <code>space, esc</code>, <code>arrow left, arrow up</code>, and <code>arrow right, arrow down</code> </td> </tr> <tr> <td align=left> <a href=#images>imgs</a> </td> <td align=left>array</td> <td align=left>undefined</td> <td align=left>Required. An array of objects containing valid src and srcset values of img element</td> </tr> <tr> <td align=left>imgCountSeparator</td> <td align=left>string</td> <td align=left>' / '</td> <td align=left>Custom separator for the image count</td> </tr> <tr> <td align=left>isOpen</td> <td align=left>bool</td> <td align=left>false</td> <td align=left>Whether or not the imgsViewer is displayed</td> </tr> <tr> <td align=left>onClickPrev</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Fired on request of the previous image</td> </tr> <tr> <td align=left>onClickNext</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Fired on request of the next image</td> </tr> <tr> <td align=left>onClickImg</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Handle click event on the current image</td> </tr> <tr> <td align=left>onClickThumbnail</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Handle click on thumbnail</td> </tr> <tr> <td align=left>onClose</td> <td align=left>func</td> <td align=left>undefined</td> <td align=left>Required. Handle closing of the imgsViewer</td> </tr> <tr> <td align=left>preloadNextImg</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Whether to preload the next available image.</td> </tr> <tr> <td align=left>preventAutoScroll</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Determines whether auto-scrolling is prevented</td> </tr> <tr> <td align=left>showCloseBtn</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Optionally display a close "X" button in top right corner</td> </tr> <tr> <td align=left>showImgCount</td> <td align=left>bool</td> <td align=left>true</td> <td align=left>Optionally display image index, e.g., "3 of 20"</td> </tr> <tr> <td align=left>showThumbnails</td> <td align=left>bool</td> <td align=left>false</td> <td align=left>Optionally display thumbnails beneath the imgsViewer</td> </tr> <tr> <td align=left>theme</td> <td align=left>object</td> <td align=left>undefined</td> <td align=left>Pass through styles to theme each component; <code>arrow</code>, <code>container</code>, etc.</td> </tr> <tr> <td align=left>width</td> <td align=left>number</td> <td align=left>1024</td> <td align=left>Maximum width of the carousel; defaults to 1024px</td> </tr> </tbody> </table> </div> <h2>Images</h2> <div class=options-table-container id=images> <table class=options-table> <thead> <tr> <th align=left>Property</th> <th align=left>Type</th> <th align=left>Default</th> <th align=left>Description</th> </tr> </thead> <tbody> <tr> <td align=left>src</td> <td align=left>str</td> <td align=left>undefined</td> <td align=left>Required. The primary image path</td> </tr> <tr> <td align=left>srcset</td> <td align=left>arr</td> <td align=left>undefined</td> <td align=left>List of alternative image sizes</td> </tr> <tr> <td align=left>caption</td> <td align=left>str</td> <td align=left>undefined</td> <td align=left>Displayed benath the current image. Great for description or attribution</td> </tr> <tr> <td align=left>thumbnail</td> <td align=left>str</td> <td align=left>undefined</td> <td align=left>Thumbnail to display if <code>showThumbnails</code> is set to <code>true</code> </td> </tr> </tbody> </table> </div> </section> <section id=license class=section-license> <h2>License</h2> <p>React Images Viewer is free to use for personal and commercial projects under <a target=_blank href=https://github.com/guonanci/react-images-viewer/blob/master/LICENSE>the MIT license</a>.</p> <p>Attribution is not required, but greatly appreciated. It does not have to be user-facing and can remain within the code.</p> </section> <section id=help class=section-help> <h2>Help</h2> <h3>Have a question?</h3> <p>Follow the <a target=_blank href=https://github.com/guonanci/react-images-viewer#quick-start>quick start guide</a> on GitHub to get up and running quickly. Please do not use Github Issues to report personal support requests.</p> <h3>Found a bug?</h3> <p>If you find a bug, please read the <a target=_blank href=https://github.com/guonanci/react-images-viewer/blob/master/.github/CONTRIBUTING.md>Contribution Guildelines</a> before you <a target=_blank href=https://github.com/guonanci/react-images-viewer/issues>report the issue</a>.</p> </section> </div> </div> </div> <footer class=page-footer> <span class=page-footer__copyright--small>Copyright </span> <span class=page-footer__copyright--large>&copy; </span> <a href=https://www.jianshu.com/u/1a404f3eb7d9 target=_blank>Guo Nanci</a> 2018 </footer> </div> </div> <script>document.getElementById("github-stars-button").dataset.style=480<window.innerWidth?"mega":null</script> <script src=common.js></script> <script src=app.js></script> <script async defer=defer id=github-bjs src=https://buttons.github.io/buttons.js></script> </body>