use-jquery-plugin
React hook for using jQuery plugins in components
About
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.
Install
npm (Recommended)
npm i use-jquery-plugin
<script src ="https://unpkg.com/use-jquery-plugin" > </script >
Usage
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 >
);
}
API Documentation
Available on Github Pages .
Type aliases
JQueryCallback
JQueryCallback<TElement>: function
Type parameters
Type declaration
( $element: JQuery < TElement > ) : ReturnType < React.EffectCallback >
Parameters
$element: JQuery < TElement >
Returns ReturnType < React.EffectCallback >
Functions
useJQueryPlugin
useJQueryPlugin<TElement>( effect: JQueryCallback < TElement > , deps?: React.DependencyList | undefined ) : RefObject < TElement >
Type parameters
Parameters
Default value deps: React.DependencyList | undefined = [effect]
Returns RefObject < TElement >
Legend
Module
Object literal
Variable
Function
Function with type parameter
Index signature
Type alias
Type alias with type parameter
Enumeration
Enumeration member
Property
Method
Interface
Interface with type parameter
Constructor
Property
Method
Index signature
Class
Class with type parameter
Constructor
Property
Method
Accessor
Index signature
Inherited constructor
Inherited property
Inherited method
Inherited accessor
Protected property
Protected method
Protected accessor
Private property
Private method
Private accessor
Static property
Static method