Skip to content
Basic version of Fullscreen Lightbox for React.js. Website: https://fslightbox.com/react
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 1bee9da Oct 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo updated README docs link Oct 9, 2019
src updated README docs link Oct 9, 2019
tests updated README docs link Oct 9, 2019
.babelrc 1.1 Jun 5, 2019
.gitignore removed injector, added resolve method Sep 2, 2019
.npmignore updated README docs link Oct 9, 2019
LICENSE testing npm, base transformer Feb 15, 2019
README.md updated README docs link Oct 9, 2019
gulpfile.babel.js 1.3.0 Jun 26, 2019
index.html 1.1 Jun 5, 2019
index.js updated README docs link Oct 9, 2019
package.json package.json update Oct 14, 2019
setupTests.js 1.0.0 May 18, 2019
webpack-prod.config.js 1.3.2 Jul 26, 2019
webpack.config.js 1.1 Jun 5, 2019
yarn.lock updated README docs link Oct 9, 2019

README.md

React Fullscreen Lightbox Basic

Fullscreen Lightbox is plugin for displaying images, videos and more 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() {
    // 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 }
                sources={ [
                    '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/basic

Browser Compatibility

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