# React

It's available as [](https://www.npmjs.com/package/@microlink/react)

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'

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

    import Microlink from '@microlink/react'

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

[](https://www.youtube.com/watch?v=9P6rdqiybaw)

Also, it supports the rest of common things in the React universe, like passing your own styles via the `style` prop.

    import Microlink from '@microlink/react'

    <Microlink
      url='https://www.youtube.com/watch?v=9P6rdqiybaw'
      style={{ fontFamily: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace' }}
      {...props}
    />

[](https://www.youtube.com/watch?v=9P6rdqiybaw)

This is the approach used for more high level abstraction, like [](http://fela.js.org/)

fela

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

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: 0.42857em;
    `