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 hook alone will suffice:
const MyComponent = () => {
  const mediaRef = useRef()

  return (
    <div>
      <Microlink
        /* ...your props */
        mediaRef={mediaRef}
      />

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

with useCallback & useRef
If you need access to the media DOM element on mount, you would want to use the hook. This solution is explained briefly in the , and in a bit more detail in 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
      /* ...your props */
      mediaRef={getMediaRef}
    />
  )
}

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 hook alone will suffice:
const MyComponent = () => {
  const mediaRef = useRef()

  return (
    <div>
      <Microlink
        /* ...your props */
        mediaRef={mediaRef}
      />

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

with useCallback & useRef
If you need access to the media DOM element on mount, you would want to use the hook. This solution is explained briefly in the , and in a bit more detail in 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
      /* ...your props */
      mediaRef={getMediaRef}
    />
  )
}