4 React Refs Examples
Tags: react, webdev, tutorial
Published: 2019-11-25 17:44:50



> Need to access native DOM nodes in React? **Ref** is here to help you 👌🏽

In this tutorial we will cover some of the common **Ref** use-cases:

- [Managing Focus](#focus)
- [Text Selection](#select-text)
- [Media playback](#media-playback)
- [Triggering Imperative Animations](#imperative-animation)

> **Originally posted on [Nordschool](https://nordschool.com/react-refs/).**

Using **useRef** hook, we can use the **Ref** API in function components.

> All the code snippets will be using React Hooks & function components. But, you can easily write the same logic in Class components.

Are you ready? Let's start with managing focus! 😎

<h3 id="focus">Managing Focus</h3>

Use-case: We would like to use React to put the focus on an HTML element.

Here is a simple version of how we can focus an input field.. 👇🏽

```js
import React, { useRef } from 'react';

const RefFocus = () => {
  const inputRef = useRef(null);

  function focusTitle() {
    inputRef.current.focus();
  }

  return (
    <div>
      <label>You have 3 wishes...</label>
      <input ref={inputRef} />
      <button onClick={focusTitle}>Focus & Wish</button>
    </div>
  );
};

export default RefFocus;
```

By calling the function **focusTitle** we can call the native DOM's **focus()** function. 🔥

![Auto-focus using React & Ref.](https://nordschool.com/assets/static/react-refs-1.4912ebf.b0f64fc.gif)

Next in line is highlighting text... 🖋

<h3 id="select-text">Text Selection</h3>

Use-case: We would like to use React to select a textarea's value.

Here is a minimal example of how you could do that:

```js
import React, { useRef } from 'react';

const RefSelectAll = () => {
  const inputRef = useRef(null);

  function selectAll() {
    const hasText = inputRef.current.value.length > 0;

    if (hasText) {
      inputRef.current.select();
    }
  }

  return (
    <div>
      <label>What is the meaning of life?</label>
      <textarea ref={inputRef} />
      <button onClick={selectAll}>Select All</button>
    </div>
  );
};

export default RefSelectAll;
```

We can extend this technique further! Let's do a bit more fancy things like auto-copy some text.

```js
function copyMeaningOfLife() {
  const hasText = inputRef.current.value.length > 0;

  if (hasText) {
    inputRef.current.select();
    document.execCommand('copy');
    // ... Let user that their meaning of life answer is copied
  }
}
```

So now you can do something like this...✨

![Auto-copy using React & Ref.](https://nordschool.com/assets/static/react-refs-2.543306f.65ac81e.gif)

Do you feel like you already have super-powers? 😁

Let's see what else you can do...what about media players? 🎵

<h3 id="media-playback">Media playback</h3>

Use-case: We would like to use React to control HTML's native video element.

Here is how a minimal media player may look like:

```js
import React, { useRef } from 'react';

const VideoPlayer = () => {
  const videoRef = useRef(null);

  function playVideo() {
    videoRef.current.play();
  }

  function pauseVideo() {
    videoRef.current.pause();
  }

  return (
    <div>
      <video ref={this.myVideo} width="400">
        {/* Of course it's the big buck bunny! */}
        <source src="big-buck-bunny.mp4" type="video/mp4" />
      </video>
      <div>
        <button onClick={playVideo}>Play</button>
        <button onClick={pauseVideo}>Pause</button>
      </div>
    </div>
  );
};

export default VideoPlayer;
```

Now you can play & pause your video using React.

If you read the [React Docs](https://reactjs.org/docs/refs-and-the-dom.html), you will notice they mention one more use-case. It is about triggering animations.

Let's have a look...

<h3 id="imperative-animation">Triggering Imperative Animations</h3>

Use-case: We would like to use React to listen to DOM's events & trigger some animations.

Here is a simple version of you can achieve this:

> P.S: The code snippet itself doesn't have any animations! 😅

> With that said, you can pretty much add all the animations you want following the same technique.

```js
import React, { useEffect, useState, useRef } from 'react';

function ImperativeAnimations() {
  const [background, setBackground] = useState('white');

  const divRef = useRef();

  function onScroll(params) {
    const div = divRef.current;
    const { y } = div.getBoundingClientRect();
    const backgroundColor = y <= 0 ? 'white' : 'pink';
    setBackground(backgroundColor);
  }

  useEffect(() => {
    window.addEventListener('scroll', onScroll);
    return () => {
      window.removeEventListener('scroll');
    };
  }, []);

  return (
    <div ref={divRef} style={{ height: '120vh', background: background }}>
      Scroll to turn background white.
    </div>
  );
}

export default ImperativeAnimations;
```


Here is how our sophisticated animations look like: 😁

![Triggering imperative animations using React & Ref.](https://nordschool.com/assets/static/react-refs-3.543306f.0c58520.gif)

Now you know your way around the basic use-cases of Refs, rock on... 🙏🏽


------------------

**Support**

Enjoyed the article? Share the summary thread on twitter.

{% twitter 1199016507772166146 %}

------------------

**Better Code Monday Newsletter**

You might also like my newsletter. The idea is to share 3 web dev tips every Monday.

My goal is to improve my writing skills and share knowledge as much as possible. So far, few hundreds of developers have subscribed and seem to like it.

To get a feeling of what kind of stuff I share, Check out the [previous newsletter issues](https://us4.campaign-archive.com/home/?u=5e499c75818d4611a008adfb5&id=f9d3ee42b1) and [subscribe](https://nordschool.com/subscribe).