React jsfiddle with react-image-gallery

Question

I am trying to setup a React JSFiddle to include react-image-gallery.

Using UNPKG i've successfully linked to the package:

https://unpkg.com/browse/react-image-gallery@1.0.8/

I'm still stuck on the following:

1. I think i should be referencing a .js file in the package but it isn't clear which one?
2. In the fiddle, should i use the resources option, or, should i include a tag?

HTML is:

<script src="https://unpkg.com/react-image-gallery@1.0.8/build/image-gallery.js"></script>
<div id="app"></div>

React JS is:

const images = [
      {
        original: 'https://picsum.photos/id/1018/1000/600/',
        thumbnail: 'https://picsum.photos/id/1018/250/150/',
      },
      {
        original: 'https://picsum.photos/id/1015/1000/600/',
        thumbnail: 'https://picsum.photos/id/1015/250/150/',
      },
      {
        original: 'https://picsum.photos/id/1019/1000/600/',
        thumbnail: 'https://picsum.photos/id/1019/250/150/',
      },
    ];

class ReactImageGalleryTest extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        items: []
    }
  }
  
  render() {
    return (
      <div>
        <ImageGallery 
          showThumbnails={true}
          items={images} 
        />
      </div>
    )
  }
}

ReactDOM.render(<ReactImageGalleryTest />, document.querySelector("#app"))

Fiddle: https://jsfiddle.net/k_ahn/rkbteajL/34/

Answer 1

jsfiddle for react is not user-friendly IMO, try using codesandbox.io

I took your code and here is a working sample:

https://codesandbox.io/s/modest-ramanujan-tth2w?file=/src/components/react-image-gallery-test.js

The documents don't say it, but you also need to import the css, which you can see in the example.

If you really need to get this working in jsfiddle, let me know and I will pull some hair out and give it a go.