react-images-texts-videos
Version:
A simple, responsive lightbox component for displaying an array of images, texts and videos with React.js
328 lines (320 loc) • 13.4 kB
HTML
<head>
<meta charset="utf-8">
<title>React-Images-Texts-Videos</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, texts or videos.">
<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, texts or videos.">
<meta property="og:url" content="https://acamposruiz.github.io/react-images-texts-videos">
<meta property="og:site_name" content="React-Images-Texts-Videos">
<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, Texts or Videos</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, texts or videos.</p>
</header>
<div class="page-subheader">
<a href="http://github.com/acamposruiz/react-images-texts-videos" 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/acamposruiz/react-images-texts-videos" data-count-href="/acamposruiz/react-images-texts-videos/stargazers" data-count-api="/repos/acamposruiz/react-images-texts-videos#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star acamposruiz/react-images-texts-videos 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-texts-videos --save</pre>
<p>2. Example with images:</p>
<pre><code><Lightbox
items={{
type:'images',
content: [
{ 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>
<p>3. Example with texts:</p>
<pre><code><Lightbox
items={{
type:'texts',
content: [
'Text1...',
'Text2...'
]}}
isOpen={this.state.lightboxIsOpen}
onClickPrev={this.gotoPrevLightboxText}
onClickNext={this.gotoNextLightboxText}
onClose={this.closeLightbox}
/></code></pre>
<p>3. Example with videos:</p>
<pre><code><Lightbox
items={{type:'videos', items: ['videoId1', 'videoId2']}}
isOpen={this.state.lightboxIsOpen}
onClickPrev={this.gotoPrevLightboxText}
onClickNext={this.gotoNextLightboxText}
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="#items">items</a></td>
<td align="left">object</td>
<td align="left">undefined</td>
<td align="left">A object containing two values, the type of element (images, texts or videos), and an array with the items</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>Items</h2>
<div class="options-table-container" id="items">
<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">type</td>
<td align="left">string</td>
<td align="left">undefined</td>
<td align="left">Required. It can be one of three options: <a href="#images-items">images</a>, <a href="#texts-items">texts</a> or <a href="#videos-items">videos</a></td>
</tr>
<tr>
<td align="left">content</td>
<td align="left">array</td>
<td align="left">undefined</td>
<td align="left">List of the items</td>
</tr>
</tbody>
</table>
</div>
<h2 id="images-items">Images items format</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">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>
<h2 id="texts-items">Text items format</h2>
<div class="options-table-container" id="texts-items">
<p>Array of strings</p>
</div>
<h2 id="videos-items">Videos items format</h2>
<div class="options-table-container" id="texts-items">
<p>Array of strings that fit any youtube video id</p>
</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/acamposruiz/react-images-texts-videos/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/acamposruiz/react-images-texts-videos#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/acamposruiz/react-images-texts-videos/blob/master/CONTRIBUTING.md">Contribution Guildelines</a> before you <a target="_blank" href="https://github.com/acamposruiz/react-images-texts-videos/issues">report the issue</a>.</p>
</section>
</div>
</div>
</div>
<footer class="page-footer">
</footer>
</div>
</div>
<script>
document.getElementById('github-stars-button').dataset.style = window.innerWidth > 480 ? 'mega': null;
</script>
<script src="common.js"></script>
<script src="bundle.js"></script>
<script src="app.js"></script>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</body>