fslightbox-react
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/fslightbox-react package

    1.6.2-2 • Public • Published

    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

    Browser Compatibility

    Browser Works?
    Chrome Yes
    Firefox Yes
    Safari Yes
    Edge Yes
    IE 11 Yes

    Install

    npm i fslightbox-react

    DownloadsWeekly Downloads

    6,344

    Version

    1.6.2-2

    License

    MIT

    Unpacked Size

    44.8 kB

    Total Files

    4

    Last publish

    Collaborators

    • piotrzdziarski