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
13 1 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?

Intelligent Customer Chat without paying for staff: AI Chatbot for Shopify (currently free).
Accepted Solution (1)

Samia_Akram22
Shopify Partner
60 10 17

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 17

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
13 1 1

Thank you, that works.

Intelligent Customer Chat without paying for staff: AI Chatbot for Shopify (currently free).