React

It's available as .
npm install @microlink/react styled-components --save
After that, you can use it as a regular React component.
import Microlink from '@microlink/react'

<Microlink url='https://www.youtube.com/watch?v=9P6rdqiybaw' />
The React integration supports any Microlink API query parameter, just pass them as props.
import Microlink from '@microlink/react'

<Microlink 
  url='https://www.youtube.com/watch?v=9P6rdqiybaw' 
  size='large' 
/>
Also, it supports the rest of common things in the React universe, like passing your own styles via the style prop.
import Microlink from '@microlink/react'

<Microlink
  url='https://www.youtube.com/watch?v=9P6rdqiybaw'
  style={{ fontFamily: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace' }}
  {...props}
/>
This is the approach used for more high level abstraction, like or .
import Microlink from '@microlink/react'
import styled from 'styled-components'

const MyCustomCard = styled(Microlink)`
  font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
  max-width: 100%;
  border-radius: 0.42857em;
`

React

It's available as .
npm install @microlink/react styled-components --save
After that, you can use it as a regular React component.
import Microlink from '@microlink/react'

<Microlink url='https://www.youtube.com/watch?v=9P6rdqiybaw' />
The React integration supports any Microlink API query parameter, just pass them as props.
import Microlink from '@microlink/react'

<Microlink 
  url='https://www.youtube.com/watch?v=9P6rdqiybaw' 
  size='large' 
/>
Also, it supports the rest of common things in the React universe, like passing your own styles via the style prop.
import Microlink from '@microlink/react'

<Microlink
  url='https://www.youtube.com/watch?v=9P6rdqiybaw'
  style={{ fontFamily: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace' }}
  {...props}
/>
This is the approach used for more high level abstraction, like or .
import Microlink from '@microlink/react'
import styled from 'styled-components'

const MyCustomCard = styled(Microlink)`
  font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
  max-width: 100%;
  border-radius: 0.42857em;
`