Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
72 lines (50 sloc) 1.66 KB
title
React

It is available as npm package

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://www.instagram.com/p/Bu1-PpyHmCn/'
  />
)

that will produce the folllowing output

You can pass any API Parameter as a prop, for example, size

import Microlink from '@microlink/react'

export default () => (
  <Microlink
    url='https://www.instagram.com/p/Bu1-PpyHmCn/'
    size='large'
  />
)

and voilá!

The component itself accepts a style property

import Microlink from '@microlink/react'

export default () => (
  <Microlink
    url='https://www.instagram.com/p/Bu1-PpyHmCn/'
    style={{fontFamily: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace'}}
  />
)

You can use this to add your own inline styles

<Microlink url='https://www.instagram.com/p/Bu1-PpyHmCn/' style={{margin: 'auto', fontFamily: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace'}} />

This is the approach used for more high level abstraction, like fela or styled components

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;
`
You can’t perform that action at this time.