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

Solved

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

vritzka
Shopify Partner
3 0 0

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?

Accepted Solution (1)

Samia_Akram22
Shopify Partner
60 10 15

This is an accepted solution.

@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:

```javascript
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.

Problem Solved? ✔Accept and Like solutions to help future merchants.

View solution in original post

Replies 2 (2)

Samia_Akram22
Shopify Partner
60 10 15

This is an accepted solution.

@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:

```javascript
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.

Problem Solved? ✔Accept and Like solutions to help future merchants.
vritzka
Shopify Partner
3 0 0

Thank you, that works.