Using a forwardRef to Create External Controls
React's forwardRef function allows a component to receive a ref that has been created outside of it. This can be useful in cases where you want to have a specific part of your component, such as a section of a long transcript or a specific part of an audio recording, referenced from outside the component.
One example of when this might be useful is if you have a "listicle" type of audio, such as "5 things your tech resume needs", and you want to allow users to jump to specific parts of the audio. By converting the component to a forwarded ref component, you can create a ref in the parent component (in this case, the "App" component) and pass it into the audio component. This allows you to create a few buttons in the parent component that can control the audio ref and jump to specific audio sections.
To convert a component to a forwarded ref component, you can use React's forwardRef function to wrap the component, and then remove the audio ref and replace all instances with the new ref.
By doing this, you can now control the audio component, like play, pause and jump to a specific time, by interacting with the audioRef ref object created in the parent component and passed into the audio component.
Think about: What ways to control the audio outside the component could help with accessibility?
Instructor: [0:00] The last we're going to talk about forwarding refs. Depending on what you're doing, forwarding refs has an opportunity to enhance the user experience. First, what are forwardRefs? [0:11] Let's say we have a function component called Fancy button and it returns a button with a class name of Fancy button, and the children returns the children props. For a forwardRef, what you do is instead of having a function component, you have a forwardRef that takes a callback and that callback has the arguments of props and ref.
[0:34] The props acts the same as the props would in a normal function component. However, the ref can just pass in as the ref of the button or whatever element. This allows you to create a ref outside of the component and then pass it in. Let's go to the audio player.
[0:51] First, we need to import forwardRef from React. Next thing we're going to do is I am going to take the destructured props outside of the parameters and just destructure them inside the component.
[1:05] Next, I am going to create the forwarded ref component. Then around this entire component, I am going to wrap it in parentheses because remember this is a callback. Then the arguments I'm going to pass our props and ref.
[1:21] Next thing we are going to do is we're going to remove this audioRef. Instead, we are going to replace the audioRef with the forwarded ref. We're going to replace them all because that's a lot. Next, we're going to remove this useRef from the import because we're not using it.
[1:36] Next, in the app component, we are going to import useRef from React. Then inside the app component, we are going to create an audioRef using that useRef hook. Then on the audio player component, we are going to type in ref equals audioRef.
[1:55] Next, let's create a couple of buttons. Both of those buttons are going to have an onClick handler. We're going to give them both an anonymous function. On the first button, the button text is going to be play. Then, inside that function, audioRef.current.play. In the second button, the podcast guest starts talking about the computer science degree.
[2:18] I'm going to type jump to computer science degree, and that's at about 11 seconds. In the onClick handler, I'm going to set audioRef.current.currentTime to equal 11. Let's see how that works now. If I press play, it still works, and then it jumps to 11 seconds.
[2:41] To recap, we convert the audioRef component into a forwardRef component. We remove the audioRef in place of the forwardedRef. Next in the parent component, we created an audioRef using the useRef hook, and pass that as a ref to the audio player.
[2:57] Then we created two buttons and we use the audioRef to control the audio player component outside of the component.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!