10

I'm trying to add some React libraries (react-draggable, react-xarrows, and react-zoom-pan-pinch), which I normally would just install via npm, to the code snippet section on Stack Overflow. There is a button to add external .css and .js, but it doesn't let me do something similar to an npm install.

How do I do this? I'm trying to post a question but it would be helpful to have a functional code snippet.

EDIT: Added script issue with react-zoom-pan-pinch

const App = () => {
  const handler = () => {
    console.log('handler firing');
  };
  
  const transformOptions = {
    limitToBounds: false,
    minScale: 0.25,
    maxScale: 3
  };
  
  return (
      <div>
      {/*<TransformWrapper
        options={transformOptions}
      >
        <TransformComponent>*/}
        <ReactDraggable
          defaultPosition={{x: 0, y: 0}}
          onStart={handler}
          onDrag={handler}
          onStop={handler}>
          <div>
            <div className="handle">Drag from here</div>
          </div>
        </ReactDraggable>
    {/*</TransformComponent>
      </TransformWrapper> */}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/web/react-draggable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tiendeo/[email protected]/dist/index.min.js"></script>

<div id="root"></div>

3
  • 2
    Depends on the library. Generally, you'll only be able to use the ones that have CDN links available somewhere. If you can't find any, you'll have to bundle and host it yourself. Nov 3, 2020 at 3:18
  • Oh okay. I tried putting codesandbox links in my question but people keep flagging it, so I'm trying to do it with the code snippet.
    – PTN
    Nov 3, 2020 at 5:01
  • 5
    You can use codesandbox links; you just have to include the corresponding source code on Stack Overflow as well. From How to Ask: "If it is possible to create a live example of the problem that you can link to (for example, on sqlfiddle.com or jsbin.com) then do so - but also copy the code into the question itself." This makes the minimal in "minimal, reproducible example" very important. Nov 3, 2020 at 13:48

1 Answer 1

15

Both react-draggable and react-zoom-pan-pinch have links on CDNs. Here's an example of how you'd use react-draggable in a Stack Snippet:

const App = () => {
  const handler = () => {
    console.log('handler firing');
  };
  return (
    <ReactDraggable
      axis="x"
      handle=".handle"
      defaultPosition={{x: 0, y: 0}}
      position={null}
      grid={[25, 25]}
      scale={1}
      onStart={handler}
      onDrag={handler}
      onStop={handler}>
      <div>
        <div className="handle">Drag from here</div>
        <div>This readme is really dragging on...</div>
      </div>
    </ReactDraggable>
  );
};
ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/web/react-draggable.min.js"></script>
<div class="react"></div>

The important part is to add in the <script> that defines the library after the React scripts are defined in the HTML.

For react-xarrows, you can do something similar, except with the following link:

https://cdn.jsdelivr.net/npm/@tiendeo/[email protected]/dist/index.min.js

I found these by googling "<package name>" cdn.

That said, while having a live Stack Snippet is helpful for those reading your question, so they can just press "Run" and see the issue(s) for themselves without having to open up an IDE, setup a workplace, and install stuff on their own - remember having a live example isn't necessary. As long as you put enough code in the question such that someone reading it could set up a project, paste in the code, and reproduce the issue, the question will still be fine (that's how all non-frontend questions are, after all).

9
  • Hi so I'm having trouble using the react-zoom-pan-pinch cdn. I have edited the post to show the issue. It seems like this doesn't work for some reasons <script src="https://cdn.jsdelivr.net/npm/@tiendeo/react-zoom-pan-pin[email protected]/dist/index.min.js"></script>
    – PTN
    Nov 3, 2020 at 21:53
  • @PTN I think the best thing to do would be to raise an issue on their GitHub repo (github.com/prc5/react-zoom-pan-pinch) unless it's exclusively a Stack Snippet problem. Nov 3, 2020 at 22:18
  • @GalaxyCat105 okay I'll do that then
    – PTN
    Nov 3, 2020 at 22:26
  • @PTN Actually, once I look at the error in DevTools (Uncaught ReferenceError: exports is not defined at jsdelivr-header.js:7) it seems like it might be only Stack Snippets? Nov 3, 2020 at 22:28
  • 1
    Never mind, it's not - jsfiddle.net/8850s/xsu24z95 Nov 3, 2020 at 22:29
  • Whatever is doable on a plain HTML page is also doable in Stack Snippets, with the exception of the few things the sandboxed iframe forbids (like Local Storage). I wonder how the react-zoom-pan-pinch .js is intended to be used, maybe you're supposed to use it during development with Node and pack it with your app with Webpack or something? Nov 3, 2020 at 22:32
  • I have posted an issue on their Github site
    – PTN
    Nov 3, 2020 at 22:35
  • @PTN maybe post the link to that issue here as well
    – Lino
    Nov 4, 2020 at 12:05
  • Here's the link: github.com/prc5/react-zoom-pan-pinch/issues/154
    – PTN
    Nov 4, 2020 at 17:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .