React

It is 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'

export default () => <Microlink url='https://instagram.com/p/Bu1-PpyHmCn/' />
The React integration supports any API Parameter, just pass them as a prop.
import Microlink from '@microlink/react'

export default () => (
  <Microlink url='https://instagram.com/p/Bu1-PpyHmCn/' size='large' />
)
Also, it supports rest of common things on React universy, like passing your own style using style.
import Microlink from '@microlink/react'

export default () => (
  <Microlink
    url='https://instagram.com/p/Bu1-PpyHmCn/'
    style={{ fontFamily: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace' }}
  />
)
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: .42857em;
`

React

It is 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'

export default () => <Microlink url='https://instagram.com/p/Bu1-PpyHmCn/' />
The React integration supports any API Parameter, just pass them as a prop.
import Microlink from '@microlink/react'

export default () => (
  <Microlink url='https://instagram.com/p/Bu1-PpyHmCn/' size='large' />
)
Also, it supports rest of common things on React universy, like passing your own style using style.
import Microlink from '@microlink/react'

export default () => (
  <Microlink
    url='https://instagram.com/p/Bu1-PpyHmCn/'
    style={{ fontFamily: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace' }}
  />
)
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: .42857em;
`

By using this website you agree to ourprivacy.