use-jquery
React hook for bringing the jQuery magic back into your web app. 🤠
Installation
yarn add use-jquery react react-dom jquery
Beware that you need React@16.8
to be able to leverage the powers of React hooks.
Usage
The useJQuery
hook will return a tupel: the first element is the ref
of the outer element of the
component and the second element a function, that takes your DOM manipulation callback.
;;; const App = { const elemRef jQueryCallback = ; ; return <div ref=elemRef> <h1>Hello World!</h1> </div> ;}; ReactDOM;
By default use-jquery
uses the useLayoutEffect
hook internally to enable you to get hold of the
DOM in a synchronous manner. You can switch to the useEffect
hook if you pass in true
as an
argument to the useJQuery
hook.
const elemRef jQueryCallback = ;
Read more about the timing of effects.
API
useJQuery([defer])
useJQuery
returns a tupel: the first element is the ref
, the second element is a function that
takes your DOM manipulation callback.
defer
boolean
value that makes useJQuery
use the useEffect
hook internally instead of the useLayoutEffect
hook.
License
MIT @ Emanuel Kluge