How can I add onClick event for Ref Element using React Hooks?

Question

I want to toggle FullScreen. component has a toggleFullscreen method, but in docs just Class Components.

import React, { useRef } from 'react';

// Components
import { Player } from 'video-react';

export default () => {
const videoRef = useRef(null);

return (
  <div>
   <Player ref={videoRef} 
   src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
  </div>
 );
};

I think this should be possible, the Player component should support `ref`. As far as the parent component (your `default` here) is conserned, it doesn't matter if `Player` is implemented as a function component or a class component. When you use `useRef`, you access the ref with `ref.current`. Have you tried `videoRef.current.toggleFullscreen()`? — Håken Lid, Jul 27 '19 at 12:17

score 2 · Answer 1 · answered Jul 27 '19 at 12:21

If you want to toggle to fullscreen immediately after the component was mounted you can use useEffect to call the function

export default () => {
...
  React.useEffect(() => {
    videoRef.current.toggleFullscreen()

    // toggle back to normal mode when the component unmounts (optional)
    return () => {
     videoRef.current.toggleFullscreen()
    }
  }, [])

  return (
    ...
  )
}

The important part is the [] as second parameter. With this the toggle is only called once when mounting the component and not on every rerender.

score 1 · Answer 2 · edited May 27 '20 at 11:45

import React, { useRef } from 'react';

// Components
import { Player, BigPlayButton } from 'video-react';

export default () => {
    const videoRef = useRef(null);
    const toggleFullScrn = () => videoRef.current.actions.toggleFullscreen();

    return (
        <div onClick={toggleFullScrn}>
            <Player ref={videoRef} src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4">
                <BigPlayButton />
            </Player>
        </div>
    );
};

How can I add onClick event for Ref Element using React Hooks?

2 Answers2