## Table of Contents

- [mediaRef](#mediaref)

---

[](https://microlink.io/docs/api/getting-started/overview)

[API](https://microlink.io/docs/api/getting-started/overview)

[](https://microlink.io/docs/guides)

GUIDES

[](https://microlink.io/docs/mql/getting-started/overview)

MQL

[](https://microlink.io/docs/sdk/getting-started/overview)

SDK

[](https://microlink.io/docs/cards/getting-started/overview)

CARDS

## mediaRef

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.

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

[useRef](https://reactjs.org/docs/hooks-reference.html#useref)

hook alone will suffice:

``` jsx
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>

  )

}
```

\

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](https://reactjs.org/docs/hooks-reference.html#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:

``` jsx
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}

    />

  )

}
```