## Table of Contents

- [React](#react)

---

[](https://microlink.io/docs/api/getting-started/overview)

[API](https://microlink.io/docs/api/getting-started/overview)

[](https://microlink.io/docs/guides)

GUIDES

[](https://microlink.io/docs/mql/getting-started/overview)

MQL

[](https://microlink.io/docs/sdk/getting-started/overview)

SDK

[](https://microlink.io/docs/cards/getting-started/overview)

CARDS

## React

``` bash
npm install @microlink/react styled-components --save
```

After that, you can use it as a regular React component.

``` jsx
import Microlink from '@microlink/react'

<Microlink url='https://www.youtube.com/watch?v=9P6rdqiybaw' />
```

The React integration supports any [Microlink API](https://microlink.io/docs/api/getting-started/overview) query parameter, just pass them as props.

``` jsx
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.

``` jsx
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 [](http://fela.js.org/)

[fela](http://fela.js.org/)

or [](https://www.styled-components.com/)

styled components

.

``` jsx
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;

`
```