mk-react-images

<!doctype html> <head> <meta charset="utf-8"> <title>React-Images</title> <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"> <meta name="keywords" content="react,reactjs,react component,lightbox,react lightbox,react images,image,images,ui,javascript"> <meta name="description" content="A simple, responsive Lightbox component for displaying an array of images."> <meta property="og:locale" content="en-us"> <meta property="og:title" content="React-Images"> <meta property="og:description" content="A simple, responsive Lightbox component for displaying an array of images."> <meta property="og:url" content="https://jossmac.github.io/react-images"> <meta property="og:site_name" content="React-Images"> <meta property="og:type" content="article"> <link rel="stylesheet" href="example.css"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <div class="page-wrapper"> <div class="container"> <nav class="left-col"> <ul class="page-nav"> <li class="page-nav__item"> <a class="page-nav__link" href="#examples">Examples</a> </li> <li class="page-nav__item"> <a class="page-nav__link" href="#getting-started">Getting started</a> </li> <li class="page-nav__item"> <a class="page-nav__link" href="#options">Options</a> </li> <li class="page-nav__item"> <a class="page-nav__link" href="#license">License</a> </li> <li class="page-nav__item"> <a class="page-nav__link" href="#help">Help</a> </li> </ul> </nav> <div class="right-col"> <div class="page-content"> <header class="page-header"> <h1 class="page-header__title">React Images</h1> <p class="page-header__subtitle">A simple, responsive Lightbox component for <a href="http://facebook.github.io/react/" target="_blank">ReactJS</a> to display an array of images.</p> </header> <div class="page-subheader"> <a href="http://github.com/jossmac/react-images" class="page-subheader__link" target="_blank">Code and Docs on GitHub</a> <span class="page-subheader__button"> <a id="github-stars-button" class="github-button" data-style="" href="https://github.com/jossmac/react-images" data-count-href="/jossmac/react-images/stargazers" data-count-api="/repos/jossmac/react-images#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star jossmac/react-images on GitHub">Star</a> </span> </div> <div class="page-body"> <section id="examples" class="section-examples"> <h2>Examples</h2> <div id="example"></div> </section> <section id="getting-started" class="section-getting-started"> <h2>Getting Started</h2> <p>1. Install using npm:</p> <pre>npm install react-images --save</pre> <p>2. Example usage with JSX:</p> <pre><code><Lightbox images={[ { src: '../images/photo-1.jpg' }, { src: '../images/photo-2.jpg' } ]} isOpen={this.state.lightboxIsOpen} onClickPrev={this.gotoPrevLightboxImage} onClickNext={this.gotoNextLightboxImage} onClose={this.closeLightbox} /></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">backdropClosesModal</td> <td align="left">bool</td> <td align="left">false</td> <td align="left">Allow users to exit the lightbox by clicking the backdrop</td> </tr> <tr> <td align="left">currentImage</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 lightbox</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>esc</code>, <code>arrow left</code>, and <code>arrow right</code></td> </tr> <tr> <td align="left"><a href="#images">images</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">imageCountSeparator</td> <td align="left">string</td> <td align="left">' of '</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 lightbox 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">onClickImage</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 lightbox</td> </tr> <tr> <td align="left">preloadNextImage</td> <td align="left">bool</td> <td align="left">true</td> <td align="left">Based on the direction the user is navigating, preload the next available image.</td> </tr> <tr> <td align="left">showCloseButton</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">showImageCount</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 Lightbox</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">string</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">array</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">string</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">string</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 is free to use for personal and commercial projects under <a target="_blank" href="https://github.com/jossmac/react-images/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/jossmac/react-images#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/jossmac/react-images/blob/master/CONTRIBUTING.md">Contribution Guildelines</a> before you <a target="_blank" href="https://github.com/jossmac/react-images/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">© </span> <a target="_blank" href="https://twitter.com/jossmackison" target="_blank">Joss Mackison</a> 2016 </footer> </div> </div> <script> document.getElementById('github-stars-button').dataset.style = window.innerWidth > 480 ? 'mega': null; </script> <script src="common.js"></script> <script src="app.js"></script> <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script> </body>