## Table of Contents

- [mediaRef](#mediaref)

---

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

[GUIDES](https://microlink.io/docs/guides) [MQL](https://microlink.io/docs/mql/getting-started/overview) [SDK](https://microlink.io/docs/sdk/getting-started/overview) [CARDS](https://microlink.io/docs/cards/getting-started/overview)

API GUIDES MQL SDK CARDS

Getting Started

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

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

Integrations

[Eleventy](https://github.com/daviddarnes/eleventy-plugin-unfurl)

[Hugo](https://blog.ypertex.com/articles/useful-hugo-templating)

[Jekyll](https://microlink.io/docs/sdk/integrations/jekyll)

[React](https://microlink.io/docs/sdk/integrations/react)

[Vanilla](https://microlink.io/docs/sdk/integrations/vanilla)

[Vue](https://microlink.io/docs/sdk/integrations/vue)

Query Parameters

[apiKey](https://microlink.io/docs/sdk/parameters/api-key)

[contrast](https://microlink.io/docs/sdk/parameters/contrast)

[direction](https://microlink.io/docs/sdk/parameters/direction)

[fetchData](https://microlink.io/docs/sdk/parameters/fetch-data)

[lazy](https://microlink.io/docs/sdk/parameters/lazy)

[media](https://microlink.io/docs/sdk/parameters/media)

[autoPlay](https://microlink.io/docs/sdk/parameters/media/auto-play)

[controls](https://microlink.io/docs/sdk/parameters/media/controls)

[muted](https://microlink.io/docs/sdk/parameters/media/muted)

[loop](https://microlink.io/docs/sdk/parameters/media/loop)

[mediaRef](https://microlink.io/docs/sdk/parameters/media-ref)

[setData](https://microlink.io/docs/sdk/parameters/set-data)

[size](https://microlink.io/docs/sdk/parameters/size)

[url](https://microlink.io/docs/sdk/parameters/url)

API GUIDES MQL SDK CARDS

Getting Started

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

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

Integrations

[Eleventy](https://github.com/daviddarnes/eleventy-plugin-unfurl)

[Hugo](https://blog.ypertex.com/articles/useful-hugo-templating)

[Jekyll](https://microlink.io/docs/sdk/integrations/jekyll)

[React](https://microlink.io/docs/sdk/integrations/react)

[Vanilla](https://microlink.io/docs/sdk/integrations/vanilla)

[Vue](https://microlink.io/docs/sdk/integrations/vue)

Query Parameters

[apiKey](https://microlink.io/docs/sdk/parameters/api-key)

[contrast](https://microlink.io/docs/sdk/parameters/contrast)

[direction](https://microlink.io/docs/sdk/parameters/direction)

[fetchData](https://microlink.io/docs/sdk/parameters/fetch-data)

[lazy](https://microlink.io/docs/sdk/parameters/lazy)

[media](https://microlink.io/docs/sdk/parameters/media)

[autoPlay](https://microlink.io/docs/sdk/parameters/media/auto-play)

[controls](https://microlink.io/docs/sdk/parameters/media/controls)

[muted](https://microlink.io/docs/sdk/parameters/media/muted)

[loop](https://microlink.io/docs/sdk/parameters/media/loop)

[mediaRef](https://microlink.io/docs/sdk/parameters/media-ref)

[setData](https://microlink.io/docs/sdk/parameters/set-data)

[size](https://microlink.io/docs/sdk/parameters/size)

[url](https://microlink.io/docs/sdk/parameters/url)

## mediaRef

[Copy for LLM](https://microlink.io/docs/sdk/parameters/media-ref.md "Copy content for LLM")

\|

[View as Markdown](https://microlink.io/docs/sdk/parameters/media-ref.md "View content as Markdown")

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

[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>

  )

}
```

**with useCallback & useRef**

If you need access to the media DOM element on mount, you would want to use the

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

hook. This solution is explained briefly in the [React FAQ's](https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node), and in a bit more detail in [this](https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780) 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}

    />

  )

}
```

Last updated on January 10, 2026

[Edit on GitHub](https://github.com/microlinkhq/www/blob/master/src/content/docs/sdk/parameters/media-ref.md)