https://github.com/herschel666/use-jquery

React hook for bringing the jQuery magic back into your web app. 🤠
https://github.com/herschel666/use-jquery

hooks jquery react react-hooks reactjs

Last synced: 14 days ago
JSON representation

React hook for bringing the jQuery magic back into your web app. 🤠

• Host: GitHub
• URL: https://github.com/herschel666/use-jquery
• Owner: herschel666
• License: mit
• Created: 2019-03-06T21:22:35.000Z (over 5 years ago)
• Default Branch: KillYourMaster
• Last Pushed: 2024-09-12T19:48:48.000Z (2 months ago)
• Last Synced: 2024-09-13T21:57:33.344Z (2 months ago)
• Topics: hooks, jquery, react, react-hooks, reactjs
• Language: JavaScript
• Size: 361 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 45
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `use-jquery`

> React hook for bringing the jQuery magic back into your web app. 🤠

## Installation

```sh

yarn add use-jquery react react-dom jquery

```

_Beware that you need `[email protected]` 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.

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import useJQuery from 'use-jquery';

const App = () => {

  const [elemRef, jQueryCallback] = useJQuery();

  jQueryCallback($elem => $elem.find('h1').css('color', 'tomato'));

  return (

    


      
Hello World!

    

  );

};


ReactDOM.render(, document.getElementById('root'));

```

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.

```javascript

const [elemRef, jQueryCallback] = useJQuery(true);

```

[Read more about the timing of effects.](https://reactjs.org/docs/hooks-reference.html#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](https://mastodon.social/@herschel_r)