Skip to content
Basic version of Fullscreen Lightbox for React.js. Website: https://fslightbox.com
Branch: master
Clone or download
piotrzdziarski Merge pull request #96 from piotrzdziarski/1.3
refactorized slide swiping to work with new stage indexes style
Latest commit 648dd3b Jun 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo 1.3.0 refactoring elements class managment Jun 21, 2019
src refactorized slide swiping to work with new stage indexes style Jun 22, 2019
tests refactorized slide swiping to work with new stage indexes style Jun 22, 2019
.babelrc 1.1 Jun 5, 2019
.gitignore 1.0.0 May 18, 2019
.npmignore 1.0.0 May 18, 2019
LICENSE testing npm, base transformer Feb 15, 2019
README.md 1.3.0 improving stage indexes Jun 18, 2019
index.html
index.js refactorized slide swiping to work with new stage indexes style Jun 22, 2019
package-lock.json 1.1 Jun 5, 2019
package.json 1.2.0 Jun 11, 2019
setupTests.js 1.0.0 May 18, 2019
webpack-prod.config.js 1.1.1 Jun 8, 2019
webpack.config.js 1.1 Jun 5, 2019

README.md

React Fullscreen Lightbox Basic

Fullscreen Lightbox is plugin for displaying images and videos in clean overlaying box.

Website: https://fslightbox.com

Dependency Version
react at least 16.8.0
react-dom at least 16.8.0
prop-types at least 15.6.2

Basic usage

Installation

 npm install --save-dev fslightbox-react

Example

import React, { useState } from 'react';
import FsLightbox from 'fslightbox-react';

function App() {
    // initial toggler value determines if lightbox should be opened on init
    // if toggler is updated when lightbox is closed it will open it
    // if toggler is updated when lightbox is opened it will close it
    const [toggler, setToggler] = useState(false);

    return (
        <>
            <button onClick={ () => setToggler(!toggler) }>
                Toggle Lightbox
            </button>
            <FsLightbox
                toggler={ toggler }
                sourcesElements={ [
                    'https://i.imgur.com/fsyrScY.jpg',
                    'https://www.youtube.com/watch?v=xshEZzpS4CQ',
                    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
                ] }
            />
        </>
    );
}

export default App;

Demo

Available at: https://fslightbox.com/react

Documentation and props description

Available at: https://fslightbox.com/react/documentation

Browser Compatibility

Browser Works?
Chrome Yes
Firefox Yes
Safari Yes
Edge Yes
IE 11 Yes
You can’t perform that action at this time.