Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
100 lines (76 sloc) 3.27 KB
title
Vanilla

It is available as npm package

npm install @microlink/vanilla --save

The vanilla bundle is based on the React version, but exported as Universal Module Definition (UMD).

Since the bundle doesn't include the depdendencies, we recommend load it from a CDN

<script src="https://cdn.jsdelivr.net/npm/react@16/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/styled-components@4/dist/styled-components.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@microlink/vanilla@4.0.0-alpha.3/dist/microlink.min.js"></script>

or even better, just one line:

<script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@microlink/vanilla@4.0.0-alpha.3/dist/microlink.min.js"></script>

After that, microlink will available in the global scope.

  <script>
  document.addEventListener('DOMContentLoaded', function (event) {
    // Example 1
    // Replace all `a` tags for microlink cards
    microlink('a')
    // Example 2
    // Replace all elements with `link-preview` class
    // for microlink cards
    microlink('.link-previews')
    // Example 3
    // Replace all elements with `link-preview` class
    // for microlink cards, passing API specific options
    microlink('.link-previews', { size: 'large' })
  })
</script>

The vanilla interface is pretty simliar to jQuery/Zepto: You need to provide a CSS selector as target element you want to convert into beautiful preview.

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

<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.link-previews', { 
      size: 'large'
    })
  })
</script>

Note that the API parameters you pass there will be attached for all the links.

If you want to pass specific API Parameters just for some cases, you can pass them as data attributes:

<a 
  src="https://www.theverge.com/tldr/2018/2/7/16984284/tesla-space-falcon-heavy-launch-elon-musk" 
  class"link-preview" 
  data-size="large">
</a>

Although it is shipped with a default styles, you can customize it using CSS Classnames

<style>
  .microlink-card {
    font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
    max-width: 100%;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.link-previews', { 
      size: 'large'
    })
  })
</script>

that it will be rendered as

<Microlink url='https://www.theverge.com/tldr/2018/2/7/16984284/tesla-space-falcon-heavy-launch-elon-musk' style={{margin: 'auto', fontFamily: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace'}} size='large' />

You can’t perform that action at this time.