# react-vimeo

> React component to load video from Vimeo

Latest version **2.0.0** (published 2018-03-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-vimeo
pnpm add react-vimeo
yarn add react-vimeo
bun add react-vimeo
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2018-03-08 |
| First published | 2015-07-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 110.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 77 |
| Author | Berkeley Martinez |
| Maintainers | berkeleytrue |
| Keywords | react, react-component, react-video, video, vimeo, player |

## Links

- npm: https://www.npmjs.com/package/react-vimeo
- Repository: https://github.com/freecodecamp/react-vimeo
- Issues: https://github.com/freecodecamp/react-vimeo/issues
- npm.io page: https://npm.io/package/react-vimeo

## Dependencies (3)

- [debug](https://npm.io/package/debug.md) ^2.2.0
- [jsonp](https://npm.io/package/jsonp.md) ^0.2.0
- [keymirror](https://npm.io/package/keymirror.md) ^0.1.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2018-03-08
- 1.0.0 — 2016-12-13
- 0.2.2 — 2016-09-28
- 0.2.1 — 2016-09-02
- 0.2.0 — 2016-07-27
- 0.1.1 — 2016-04-28
- 0.1.0 — 2016-01-08
- 0.0.3 — 2015-07-10
- 0.0.2 — 2015-07-10
- 0.0.1 — 2015-07-08

## README

# React Vimeo

[![NPM](https://nodei.co/npm/react-vimeo.png?downloads=true)](https://nodei.co/npm/react-vimeo/)

## Usage

```javascript
  var Vimeo = require('react-vimeo');

  React.render(
    <Vimeo videoId={ videoId } />,
    $mountNode
  );
```

To handle errors, you can pass a function to the `onError` prop:

```js
  function onError(err) {
    console.error(err);
  };

  React.render(
    <Vimeo onError={ onError } videoId={ videoId } />
    document.querySelector('#your-div')
  );
```

To automatically play the video on page load:

```javascript
  var Vimeo = require('react-vimeo');

  React.render(
    <Vimeo videoId={ videoId } autoplay={true} />,
    $mountNode
  );
```

## Behind the Scenes

There are some things that you should know about the component. The first one is the structure created inside by the component if you wish to stylize it.

So, the semantic HTML structure will be something like this:

```html
  <div class='vimeo'>
    <div class='vimeo-loading'>
      <svg>...</svg>
    </div>
    <div class='vimeo-image'>
      <button type='button' class='vimeo-play-button'>
        <svg>...</svg>
      </button>
    </div>
    <div class='video-embed'>
      <iframe>...</iframe>
    </div>
  </div>
```

This is a very simple structure to stylize however you want. So, if you are lost, don't panic, there is an [example live here](http://freecodecamp.github.io/react-vimeo/) that you can follow.

For more details, check out the API

## API

[API](docs/README.md)

## License

MIT

See the [License](LICENSE.md) file.

---
_Source: https://npm.io/package/react-vimeo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._