React

Installation

It is available as a npm package:
npm install react-microlink styled-components --save
Then you can interact with it as a regular React component:
import MicrolinkCard from 'react-microlink'

// Just provide a URL to create a card
<MicrolinkCard
  url='https://www.theverge.com/tldr/2018/2/7/16984284/tesla-space-falcon-heavy-launch-elon-musk'
/>
import MicrolinkCard from 'react-microlink'

// Customizing the card
<MicrolinkCard
  url='https://www.theverge.com/tldr/2018/2/7/16984284/tesla-space-falcon-heavy-launch-elon-musk'
  size='large'
/>
import MicrolinkCard from 'react-microlink'

// You can pass extra props
<MicrolinkCard
  url='https://www.theverge.com/tldr/2018/2/7/16984284/tesla-space-falcon-heavy-launch-elon-musk'
  target='_blank'
/>
Check the API reference in order to know what options you can use.

Styling

We don't inject any CSS in your application. The card previsualization is shipped with a default minimal inline style.
In order to make easy adapt look and feel, we provide different approach for customizing the style.

Using CSS Selectors

We don't inject any CSS into your application. The card previsualization is shipped with a default minimal inline style.
If you need to adapt the look and feel, each component of the card has been assigned a BEM class name:

microlink_card

The root div of the card.

microlink_card__media_image

The div holding the background-image of the image preview of the link.

microlink_card__media_video_wrapper

The wrapper div around the video preview of the link.

microlink_card__media_video

The video element for the video preview of the link.

microlink_card__content

The wrapper div around the content preview of the link.

microlink_card__content_title

The p tag of the card title.

microlink_card__content_description

The p tag of the card description.

microlink_card__content_url

The span tag of the card url link.
This is the approach used to support customization using CSS Modules or similar approaches in the React ecosystem using CSS class names:
<style>
  .microlink-card {
    font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
  }
</style>

Using inline style

By default, the card's components are shipped with a default and minimal style.
The component itself accepts a style property. You can use this to add your own inline styles, like:
<MicrolinkCard
  url="https://vimeo.com/188175573"
  style={{fontFamily: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace'}}
/>
Also, this is the approach used for more high level abstraction; like fela, styled components or other similar JSS solutions:
import MicrolinkCard from 'react-microlink'
import styled from 'styled-components'

const myCustomCard = styled(MicrolinkCard)`
  font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
  max-width: 100%;
  border-radius: .42857em;
`
and voilá!