https://github.com/phuocng/master-of-react-ref

Your complete guide to mastering the use of "ref" in React
https://github.com/phuocng/master-of-react-ref

react-ref reactjs

Last synced: 3 months ago
JSON representation

Your complete guide to mastering the use of "ref" in React

• Host: GitHub
• URL: https://github.com/phuocng/master-of-react-ref
• Owner: phuocng
• License: mit
• Created: 2023-10-08T13:48:15.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-03T14:33:21.000Z (over 2 years ago)
• Last Synced: 2025-02-28T11:24:31.306Z (over 1 year ago)
• Topics: react-ref, reactjs
• Language: TypeScript
• Homepage: https://phuoc.ng/collection/react-ref/
• Size: 8.89 MB
• Stars: 26
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Master of React ref

React Ref is a fantastic feature in React that allows you to directly access and manipulate DOM (Document Object Model) elements.

In simpler terms, it's a way to reference a specific element in your React app, giving you the power to modify and interact with it outside of the normal React data flow.

This series is your ultimate guide to mastering the use of ref in React.

We'll start with the basics, such as string and callback ref, and then dive into more advanced topics like the `useRef()` hook and `forwardRef()` API.

By the end, you'll have a deep understanding of how to use ref like a pro in your React applications.

Get ready to take your React skills to the next level!

-   [01: Access a component's underlying DOM node with findDOMNode()](https://phuoc.ng/collection/react-ref/access-a-component-underlying-dom-node-with-find-dom-node/)

![Access a component's underlying DOM node with findDOMNode()](/01-access-a-component-underlying-dom-node-with-find-dom-node/find-dom-node.png)

-   [02: String refs](https://phuoc.ng/collection/react-ref/string-refs/)

![String refs](/02-string-refs/string-refs.png)

-   [03: Store a reference with callback refs](https://phuoc.ng/collection/react-ref/store-a-reference-with-callback-refs/)

![Store a reference with callback refs](/03-store-a-reference-with-callback-refs/callback-refs.png)

-   [04: Access the methods of class components](https://phuoc.ng/collection/react-ref/access-the-methods-of-class-components/)

![Access the methods of class components](/04-access-the-methods-of-class-components/access-methods.png)

-   [05: Use callback refs to access individual elements in a list](https://phuoc.ng/collection/react-ref/use-callback-refs-to-access-individual-elements-in-a-list/)

![Use callback refs to access individual elements in a list](/05-use-callback-refs-to-access-individual-elements-in-a-list/access-individual-elements.png)

-   [06: Implement a basic container query with callback refs](https://phuoc.ng/collection/react-ref/implement-a-basic-container-query-with-callback-refs/)

![Implement a basic container query with callback refs](/06-implement-a-basic-container-query-with-callback-refs/basic-container-query.png)

-   [07: Save the element passed to a callback ref as a state](https://phuoc.ng/collection/react-ref/save-the-element-passed-to-a-callback-ref-as-a-state/)

![Save the element passed to a callback ref as a state](/07-save-the-element-passed-to-a-callback-ref-as-a-state/callback-ref-state.png)

-   [08: Create a custom hook returning a callback ref](https://phuoc.ng/collection/react-ref/create-a-custom-hook-returning-a-callback-ref/)

![Create a custom hook returning a callback ref](/08-create-a-custom-hook-returning-a-callback-ref/hook-returning-callback-ref.png)

-   [09: Make an element draggable](https://phuoc.ng/collection/react-ref/make-an-element-draggable/)

![Make an element draggable](/09-make-an-element-draggable/draggable.png)

-   [10: Pass refs to child components using the function as a child pattern](https://phuoc.ng/collection/react-ref/pass-refs-to-child-components-using-the-function-as-a-child-pattern/)

![Pass refs to child components using the function as a child pattern](/10-pass-refs-to-child-components-using-the-function-as-a-child-pattern/pass-refs-child-components.png)

-   [11: Create a reference using React.createRef()](https://phuoc.ng/collection/react-ref/create-a-reference-using-react-create-ref/)

![Create a reference using React.createRef()](/11-create-a-reference-using-react-create-ref/react-create-ref.png)

-   [12: Reference an element with React's useRef() hook](https://phuoc.ng/collection/react-ref/reference-an-element-with-react-use-ref-hook/)

![Reference an element with React's useRef() hook](/12-reference-an-element-with-react-use-ref-hook/use-ref.png)

-   [13: Build your own drawing board](https://phuoc.ng/collection/react-ref/build-your-own-drawing-board/)

![Build your own drawing board](/13-build-your-own-drawing-board/drawing-board.png)

-   [14: Drag and drop items within a list](https://phuoc.ng/collection/react-ref/drag-and-drop-items-within-a-list/)

![Drag and drop items within a list](/14-drag-and-drop-items-within-a-list/drag-drop-items.png)

-   [15: Persist values between renders](https://phuoc.ng/collection/react-ref/persist-values-between-renders/)

![Persist values between renders](/15-persist-values-between-renders/persist-values.png)

-   [16: Save the previous value of a variable](https://phuoc.ng/collection/react-ref/save-the-previous-value-of-a-variable/)

![Save the previous value of a variable](/16-save-the-previous-value-of-a-variable/save-previous-value.png)

-   [17: Detect whether an element is in view](https://phuoc.ng/collection/react-ref/detect-whether-an-element-is-in-view/)

![Detect whether an element is in view](/17-detect-whether-an-element-is-in-view/detect-in-view.png)

-   [18: Pass a ref to a custom hook](https://phuoc.ng/collection/react-ref/pass-a-ref-to-a-custom-hook/)

![Pass a ref to a custom hook](/18-pass-a-ref-to-a-custom-hook/pass-ref-custom-hook.png)

-   [19: Merge different refs](https://phuoc.ng/collection/react-ref/merge-different-refs/)

![Merge different refs](/19-merge-different-refs/merge-refs.png)

-   [20: Build a tooltip component](https://phuoc.ng/collection/react-ref/build-a-tooltip-component/)

![Build a tooltip component](/20-build-a-tooltip-component/tooltip.png)

-   [21: Pass a ref to a child component using forwardRef()](https://phuoc.ng/collection/react-ref/pass-a-ref-to-a-child-component-using-forward-ref/)

![Pass a ref to a child component using forwardRef()](/21-pass-a-ref-to-a-child-component-using-forward-ref/forward-ref.png)

-   [22: Expose methods of a component using useImperativeHandle()](https://phuoc.ng/collection/react-ref/expose-methods-of-a-component-using-use-imperative-handle/)

![Expose methods of a component using useImperativeHandle()](/22-expose-methods-of-a-component-using-use-imperative-handle/use-imperative-handle.png)