How to use this Drag n Drop Javascript library in my Shopify app?

Shopify Apps
1

Hello team,

apology for this basic question, I am new to Shopify / Remix development.

  1. I created the Remix app from template and its working well.

  2. I need to build a drag n drop area inside my app. For that I would like to use https://interactjs.io/.

  3. I have imported that library like so in my app._index.jsx:

import interact from 'interactjs'

Now, in order to start this library, I need to add code like this:

const slider = interact('.slider') 

// more code

I don’t know where to add the above code. (It needs to run after my DOM is loaded).

Could someone point me in the right direction please?

2

@vritzka

No need to apologize! To ensure the code runs after your DOM is loaded, you can use the useEffect hook if you are using React. Here’s an example:

import React, { useEffect } from 'react';
import interact from 'interactjs';

const YourComponent = () => {
useEffect(() => {
const slider = interact('.slider');
// more code related to the interaction

// Clean up the interaction when the component unmounts
return () => {
slider.unset();
};
}, []); // Empty dependency array ensures the effect runs once after the initial render

// rest of your component code
};

export default YourComponent;

This code initializes the interaction using interact within the useEffect hook. It ensures that the code runs after the initial render when the DOM is ready. Also, it includes a cleanup function to unset the interaction when the component unmounts to avoid potential memory leaks.

Feel free to adapt it based on your component structure and needs.

1 Like
3

Thank you, that works.