React hook for using jQuery plugins in components
use-jquery-plugin simplifies hook-based usage of jQuery plugins in React.
The hook useJQueryPlugin() is the same as useLayoutEffect(), but it returns a reference object to be passed to an HTML element. The effect passed to useJQueryPlugin() is provided with the jQuery selection containing the HTML element that the reference is assigned.
npm (Recommended)
npm i use-jquery-plugin<script src="https://unpkg.com/use-jquery-plugin"></script>import React from 'react';
import useJQueryPlugin from 'use-jquery-plugin';
export default function App() {
const elemRef = useJQueryPlugin($elem => {
$elem.find('h1').css('font-family', 'Comic Sans');
}, []);
return (
<article ref={elemRef}>
<h1>Hello, world!</h1>
</article>
);
}Available on Github Pages.