JSFiddle - React, Tailwind, and code Playground

by sabbin

HTML

<script src="react-lightbox-component"></script>

React

import React, {
  Component
} from 'react'
import Lightbox from 'react-lightbox-component';

const images = [{
        src: '../images/pic_01.jpg'
      },
      {
        src: '../images/pic_02.jpg'
      },
      {
        src: '../images/pic_03.jpg'
      },
      {
        src: '../images/decorative_pic.jpg'
      },
      {
        src: '../images/decorative_pic.jpg'
      },
      {
        src: '../images/decorative_pic.jpg'
      }
    ];
    
const LightBoxTest = () => (

  <div >
  <Lightbox
  images={images}
  renderImageFunc={(idx, image, toggleLightbox, width, height) => {
    pattern = /decorative/g;
    console.log(pattern.test(image.src));
    return (
      <img
        key={idx}
        src={image.src}
        className='img-circle'
        style={{width: width, height: height}}
        onClick={toggleLightbox.bind(null, idx)} />
    )
  }}/>;
  </div>
);