react-simple-lightbox-video-image
A simple and customizable react lightbox component that support video and image. Also enables swipe and doble tap gesture. This component can be compatible with Next js
Installation
yarn add @santigp258/react-simple-lightbox-video-image
Or
npm install @santigp258/react-simple-lightbox-video-image
Usage
Basic usage.
import React from 'react';
import ReactSimpleImageVideoLightbox, {
ResourcersType,
} from '@santigp258/react-simple-lightbox-video-image';
const data: ResourcersType[] = [
{
title: 'Example title',
type: 'photo',
url:
'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
altTag: 'example alt tag',
},
{
title: 'Example title',
type: 'photo',
url: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
altTag: 'example alt tag',
},
];
const Example = () => {
const [isOpen, setIsOpen] = React.useState(false);
const handleClose = () => {
setIsOpen((state) => !state);
};
return (
<>
<button onClick={handleClose}>Toggle lightbox</button>
{isOpen ? (
<ReactSimpleImageVideoLightbox
data={data}
onCloseCallback={handleClose}
/>
) : null}
</>
);
};
Using with Next js
import React from 'react';
import Image from 'next/image';
import ReactSimpleImageVideoLightbox, {
ResourcersType,
VideoImagePropsType,
} from '@santigp258/react-simple-lightbox-video-image';
const data: ResourcersType[] = [
{
title: 'Example title',
type: 'photo',
url:
'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
altTag: 'example alt tag',
},
{
title: 'Example title',
type: 'photo',
url: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
altTag: 'example alt tag',
},
];
const renderCustomImage = (props: VideoImagePropsType) => {
return (
<Image
title={props.title}
className={props.className}
onLoad={props.onLoad}
alt={props.alt}
src={props.src}
loader={loaderImage}
layout="fill"
objectFit="contain"
/>
);
};
const Example = () => {
const [isOpen, setIsOpen] = React.useState(false);
const handleClose = () => {
setIsOpen((state) => !state);
};
return (
<>
<button onClick={handleClose}>Toggle lightbox</button>
{isOpen ? (
<ReactSimpleImageVideoLightbox
data={data}
CustomImage={renderCustomImage}
onCloseCallback={handleClose}
/>
) : null}
</>
);
};
Custom styling (CSS)
It's possible, to style each HTML element of this component separetely. This can be done either via inline styles or by assigning your own classes.
Overview of props
Prop name | Description | Data type | Example | Default |
---|---|---|---|---|
data | Array of resources | ResourcersType[] | [{title: 'Example title',type: 'photo',url:'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',altTag: 'example alt tag', },]; | undefined |
startIndex | Initial index | number | 2 | 0 |
showResourceCount | Boolean indicator whether the resource count should be display. | boolean | false | false |
backdropBg | Backdrop background color | string | white | rgba(0,0,0,.5) |
TODO:
- Finish docs
Credits
This component extends some funcionality from react-image-video-lightbox
License
MIT © Santigp258