# mediaRef

Type:

\<object\> \| \<function\>

It returns the DOM reference used for mounting the internal media component.

Depending on your implementation and requirements, the way you'd use this property can vary.

**with useRef**

If you don't need the ref "on mount" (eg. for attaching callbacks), React's [](https://reactjs.org/docs/hooks-reference.html#useref)

useRef

hook alone will suffice:

    const MyComponent = () => {
      const mediaRef = useRef()

      return (

          <Microlink
            /* passing your props */
            mediaRef={mediaRef}
          />

          <button onClick={() => mediaRef.current.play()}>Play</button>
          <button onClick={() => mediaRef.current.pause()}>Pause</button>

      )
    }

\

**with useCallback & useRef**

If you need access to the media DOM element on mount, you would want to use the [](https://reactjs.org/docs/hooks-reference.html#usecallback)

useCallback

hook. This solution is explained briefly in the [](https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node)

React FAQ's

, and in a bit more detail in [](https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780)

this

popular Medium post:

    const MyComponent = () => {
      const mediaRef = useRef()
      const getMediaRef = useCallback(node => {
        const onPlay = () => alert('video playing!')

        // Listener cleanup, like the return function on `useEffect`
        if (mediaRef.current) {
          mediaRef.current.removeEventListener('play', onPlay)
        }

        // Create event listeners
        if (node) {
          mediaRef.current.addEventListener('play', onPlay)
        }

        // Update `mediaRef` to latest DOM node
        mediaRef.current = node
      }, [])

      return (
        <Microlink
          /* passing your props */
          mediaRef={getMediaRef}
        />
      )
    }