What is jQuery needed for?

[killercup]

I'd like to use parts of this, but without the jQuery dependency.

I've search for jQuery and found some files that say they require jQuery but never actually use it (like table-header.jsx).

Is there a list of features jQuery is used for? Or is there a plan to get rid of the dependency?

[totty90]

https://github.com/callemall/material-ui/blob/b244832e01eeb15f19e1dff45b90863ef137daee/docs/dist/js/drop-down-menu.jsx#L35

[zzmp]

Isn't that just a docs specific dependency?

Does this mean that all of the source is implemented under the docs folder? That's incredibly unintuitive.

[totty90]

Look here var $el = $(this.getDOMNode()),. You are right docs is the worst folder to put your src in. That's that I opened this issue

[felixakiragreen]

👍

React and JQuery do not play nicely and ideally no React components should rely on JQuery.

[hai-cea]

Here's what we're currently using out of the jQuery library:

Components:

• Dialog - innerHeight(), css()
• DropdownIcon - width(), css()
• DropdownMenu - width(), css()
• Menu - outterWidth(), width(), height(), css()
• Ripple - parent(), offset(), addClass(), removeClass(), css()

Mixins & Utils:

• ClickAwayable - on(), off()
• CssEvent - one()

Any suggestions on how we could remove the jQuery dependency and still have the above functionality?

[felixakiragreen]

innerHeight() - this.getDOMNode().clientHeight
css() - React classSet or Element classList or this.getDOMNode().style or this.getDOMNode().cssText
width() - this.getDOMNode().style.width
outerWidth() - this.getDOMNode().offsetWidth
height() - this.getDOMNode().style.height
parent() - Node.parentElement
addClass() / removeClass() - I would encourage using React's classSet, but Element.classList.add or remove can also be used
offset() - Element.getBoundingClientRect()
on() / off() - Element.addEventListener, but this can be handled by React's native events and probably shouldn't be necessary.

However, while these can be directly substituted, for many of them (like classes, events) React has its own pattern and way of doing things. This will require changing a little logic, but it will make everything run much smoother and allow for easier future development.

[philipgiuliani]

It would be nice to remove the jQuery dependency, since people are currently avoiding to use it because of the overheat in some projects.

[plus-]

React and JQuery do not play nicely

@DUBERT care to elaborate on that, I'd like to know

[hai-cea]

I've removed some of the jQuery dependencies. Still working on the others. Here's what's left:

• Menu - outterWidth(), width(), height(), children(), css()
• Ripple - parent(), offset(), addClass(), removeClass(), css()

Mixins & Utils:

• ClickAwayable - on(), off()
• CssEvent - one()

[hai-cea]

There is one jQuery dependency that I can't get rid of. Currently, I'm using jQuery to namespace click events for the click-awayable mixin. This mixin allows components to do something if a click event happens outside of the component.

Anyone have a good way to do this with native JS? Here's the JS file I'm talking about:
https://github.com/callemall/material-ui/blob/master/src/js/mixins/click-awayable.js

[hai-cea]

Figured it out. :)