microlink logo

setData

Type:
<object> | <function>
A data mapper that will be invoked before mounting the card.
When an <object> is passed to setData, the custom data provided will be merged with the original data.
  • React
  • Vue
  • Jekyll
  • Vanilla
import Microlink from '@microlink/react'

<Microlink
  url='https://www.instagram.com/p/BeV6tOhFUor/'
  setData={{ title: 'SENTRY ACTIVATED' }}
/>
The data provided will be merged with the original data extracted.
Additionally you can pass a <function> where in this case the first argument that received will be the data fetched using fetchData:
import Microlink from '@microlink/react'

<Microlink
  url='https://www.instagram.com/p/BeV6tOhFUor/'
  setData={data => ({
    ...data,
    title: 'SENTRY ACTIVATED',
    description: 'Are humans worth it?',
    image: { url: 'https://i.imgur.com/1FyFxlk.jpg' },
    publisher: 'HAL 9000',
    url: 'http://thehal9000.com'
  })}
/>
Skip internal fetch providing a function as setData.
The function should return all the data necessary to be mounted.