Git Product home page Git Product logo

fslightbox-react's Introduction

React Fullscreen Lightbox Basic

Description

A React component for displaying images, videos, or, through custom sources, anything you want in a clean overlying box. The project's website: https://fslightbox.com.

Dependency Version
react at least 16.8.0
react-dom at least 16.8.0

Installation

Through a package manager

npm install fslightbox-react

Or, through an archive downloaded from the website

The .tgz archive, in its entirety, should be put somewhere in the end project, for example, "./src/lib". Then run the package manager's install command with the path to that archive. The command have to be run from the directory where your project's "package.json" file is.

$ npm install ./src/lib/[lightbox archive name] 

For example:

$ npm install ./src/lib/fslightbox-react-1.0.0.tgz

Basic usage

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

function App() {
	// To open the lightbox change the value of the "toggler" prop.
	const [toggler, setToggler] = useState(false);

	return (
		<>
			<button onClick={() => setToggler(!toggler)}>
				Open the 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;

Documentation

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

Demo

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

Browser Compatibility

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

fslightbox-react's People

Contributors

banthagroup avatar binomialstew avatar dependabot[bot] avatar hypnosphi avatar kokatsuna avatar piotrzdziarski avatar stasinski avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.