2

I have a JS function which I need to run in my React App.

The function adds a mousemove event listener to the 'body' and then mouse-down and mouse-up events to the 'window'. Finally we change the style of an element dependent on the eventListeners.

I really don't know where this function would go, or where it would be imported and used?

From my research two things came up:

"So either you define the method on global scope (aka window). And then you can use it from any methods, being React or not."

How exactly would you do that. Would that be some sort of 'bundle.js' which is included in the index.html file? I already have a webpack.config set up creating a bundle.js for my react components.

"Or you can switch to module based paradigm and use require/import to get the module and use the function."

Ok, but the javascript function in question spans over a few different components? Perhaps I could listen to mouse-move event on "body" but how would i then dynamically style another element in another component?

Thanks a lot for any help?

Improve this question
3
  • what does the function do? is it something you wrote or a third party library? how you call the function from react is simple enough, but manipulating your react state from it depends on what it does Commented Sep 20, 2017 at 23:38
  • oof, you don't want to be mixing "jquery-ness" (changing html with javascript) with react, you need to think of a react approach via data binding Commented Sep 20, 2017 at 23:39
  • Thanks for the responses guys. Just for clarification, here is a fiddle showing my JS function (but i need to transfer it to react). jsfiddle.net/harrydry/2dy412e4/13 I'm guessing the stuff I'm doing does count as jquery-ness? Only been learning React for a month, so not quite sure ho to go about this still? Commented Sep 21, 2017 at 10:19

1 Answer 1

Reset to default
1

First of all, i think if you are going to add an external library to manipulate the dom, you will have problems due to reactjs use a virtual dom. It will depend on how the function is implemented.

But, if the function is well implemented, you can add it as a script in the public/index.html and then you can use it from window.yourFunctionOrWhatEver or you can call as a function.

But, if I were you I would implement my own function using the reactjs events. Here you have a list of them:

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp

Bye!

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks a lot for your help, Here is a fiddle showing precisely what I'm trying to do: jsfiddle.net/harrydry/2dy412e4/13 I need to transfer what I'm doing to react. Would you use the React.js events? There is no way I can simply drag and drop this function in?
As i told you, manipulating the Dom manually isn't the best way and in the function you have this "document.querySelector('body')". Try inserting the function in index.html as a script and test it. On the other hand, you don't have exactly the same events but merging them you could replicate the function. You just have to play a little!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.