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