Simple React light-box

A simple but functional light-box for React.

Simple React light-box

A brief introduction 🧐

My Idea 💡

Packed with features 📦

Simple React light-box comes packed with options to give the user full control over the light-box

Install

// With npmnpm install --save simple-react-lightbox// or with Yarnyarn add simple-react-lightbox

Usage

Instructions

import React from "react";
import MyComponent from "./components/MyComponent";
import SimpleReactLightbox from "simple-react-lightbox";
// Import Simple React Lightbox
function App() {
return (
<div className="App">
<SimpleReactLightbox>
<MyComponent /> // Your App logic (Components, Router etc...)
</SimpleReactLightbox>
</div>
);
}
export default App;
import React from "react";
import { SRLWrapper } from "simple-react-lightbox"; // Import SRLWrapper
function MyComponent() {
return (
<div className="MyComponent">
<SRLWrapper>
// This will be your content with the images. It can be anything. Content defined by yourself, content fetched from an API, data from a graphQL query... anything :)
</SRLWrapper>
</div>
);
}
export default MyComponent;
The light-box with the default options

Custom gallery

import React from "react";
import { SRLWrapper } from "simple-react-lightbox";
// Import SRLWrapper
function MyComponent() {
return (
<div className="MyComponent">
<SRLWrapper>
<a href="link/to/the/full/width/image.jpg" data-attribute="SRL">
<img src="src/for/the/thumbnail/image.jpg" alt="Umbrella" />
</a>
<a href="link/to/the/full/width/image_two.jpg" data-attribute="SRL">
<img src="src/for/the/thumbnail/image_two.jpg" alt="Umbrella" />
</a>
// More images...
</SRLWrapper>
</div>
);
}
export default MyComponent;

Options

I am a hybrid between a Designer and a Developer. Really curious about everything and thriving to learn.