diff --git a/.babelrc.js b/.babelrc.js
index a29ad66..9c25728 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -1,16 +1,18 @@
-const TEST = process.env.BABEL_ENV === 'test';
-const CJS = process.env.BABEL_ENV === 'cjs';
+'use strict';
 
-module.exports = {
-  presets: [
-    ['@babel/env', {
-      modules: TEST || CJS ? 'commonjs' : false,
-      loose: true,
-      targets: TEST ? { node: 'current' } : {},
-    }],
-    '@babel/react',
-  ],
-  plugins: TEST ? [
-    'dynamic-import-node',
-  ] : [],
+module.exports = (api) => {
+  const isTest = api.caller((caller) => caller.name === '@babel/register');
+
+  return {
+    targets: isTest ? { node: 'current' } : {},
+    presets: [
+      ['@babel/env', {
+        modules: isTest ? 'commonjs' : false,
+      }],
+      '@babel/react',
+    ],
+    plugins: isTest ? [
+      'dynamic-import-node',
+    ] : [],
+  };
 };
diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 0000000..a9d9a0f
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,57 @@
+and_chr 122
+and_chr 121
+and_ff 123
+and_ff 122
+and_qq 14.9
+and_uc 15.5
+android 122
+android 121
+chrome 122
+chrome 121
+chrome 120
+chrome 119
+chrome 109
+edge 122
+edge 121
+firefox 123
+firefox 122
+firefox 115
+ios_saf 17.4
+ios_saf 17.3
+ios_saf 17.2
+ios_saf 17.1
+ios_saf 17.0
+ios_saf 16.6-16.7
+ios_saf 16.5
+ios_saf 16.4
+ios_saf 16.3
+ios_saf 16.2
+ios_saf 16.1
+ios_saf 16.0
+ios_saf 15.6-15.8
+ios_saf 15.5
+ios_saf 15.4
+kaios 3.0-3.1
+kaios 2.5
+op_mini all
+op_mob 80
+opera 108
+opera 107
+opera 106
+safari 17.4
+safari 17.3
+safari 17.2
+safari 17.1
+safari 17.0
+safari 16.6
+safari 16.5
+safari 16.4
+safari 16.3
+safari 16.2
+safari 16.1
+safari 16.0
+safari 15.6
+safari 15.5
+safari 15.4
+samsung 23
+samsung 22
diff --git a/.eslintrc.js b/.eslintrc.js
index 2a91a70..aee02b0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,5 +1,23 @@
 module.exports = {
-  extends: 'airbnb',
+  extends: [
+    'eslint:recommended',
+    'plugin:import/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:jsx-a11y/recommended',
+  ],
+  plugins: [
+    'import',
+    'react',
+    'react-hooks',
+    'jsx-a11y',
+  ],
+
+  env: {
+    es6: true,
+    browser: true,
+  },
+
   parserOptions: {
     ecmaVersion: 2022,
     sourceType: 'module',
@@ -11,6 +29,11 @@ module.exports = {
     'react/require-default-props': 'off',
     // Our babel config doesn't support class properties
     'react/state-in-constructor': 'off',
+    // I disagree
+    'react/function-component-definition': ['error', {
+      namedComponents: 'function-declaration',
+      unnamedComponents: 'arrow-function',
+    }],
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     'jsx-a11y/label-has-for': ['error', {
       components: [],
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index f43925b..02ee901 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,11 +1,16 @@
 version: 2
 updates:
-- package-ecosystem: npm
+- package-ecosystem: github-actions
   directory: "/"
   schedule:
-    interval: weekly
+    interval: daily
   open-pull-requests-limit: 10
-- package-ecosystem: github-actions
+  commit-message:
+    prefix: "ci"
+- package-ecosystem: npm
   directory: "/"
   schedule:
     interval: weekly
+  open-pull-requests-limit: 10
+  commit-message:
+    prefix: "deps"
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ba0b859..31e5d60 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -56,7 +56,7 @@ jobs:
       - name: Install React ${{matrix.react-version}}
         if: matrix.react-version != '18.x'
         run: |
-          npm install --save-dev \
+          npm install --force --save-dev \
             react@${{matrix.react-version}} \
             react-dom@${{matrix.react-version}}
       - name: Run tests
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 609658f..bf043ee 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -19,7 +19,7 @@ jobs:
         run: npm test
       - name: Build example
         run: |
-          npm run example
+          npm run --prefix example build
           mkdir _deploy
           cp example/bundle.js example/index.html _deploy
       - name: Publish site
diff --git a/.gitignore b/.gitignore
index 00e7a7f..50855dd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ node_modules
 /generated-docs.md
 .eslintcache
 package-lock.json
+coverage
diff --git a/README.md b/README.md
index 50e332f..5c438cf 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 Vimeo player component for React.
 
+Supported React versions: the latest releases of 16.x, 17.x, and 18.x.
+
 [Install][] - [Usage][] - [Demo][] - [Props][]
 
 ## Install
@@ -47,7 +49,7 @@ import Vimeo from '@u-wave/react-vimeo';
 | muted | bool | false | Starts in a muted state to help with autoplay |
 | background | bool | false | Starts in a background state with no controls to help with autoplay |
 | responsive | bool | false | Enable responsive mode and resize according to parent element (experimental) |
-| playbackRate | number | | Specify playback rate (requires Vimeo PRO / Business account)
+| playbackRate | number |  | Specify playback rate (requires Vimeo PRO / Business account) |
 | speed | bool | false | Enable playback rate controls (requires Vimeo PRO / Business account) |
 | keyboard | bool | true | Allows for keyboard input to trigger player events. |
 | pip | bool | false | Show the picture-in-picture button in the controlbar and enable the picture-in-picture API. |
@@ -63,13 +65,24 @@ import Vimeo from '@u-wave/react-vimeo';
 | onEnd | function |  | Triggered any time the video playback reaches the end. Note: when `loop` is turned on, the ended event will not fire. |
 | onTimeUpdate | function |  | Triggered as the `currentTime` of the video updates. It generally fires every 250ms, but it may vary depending on the browser. |
 | onProgress | function |  | Triggered as the video is loaded. Reports back the amount of the video that has been buffered. |
+| onSeeking | function |  | Triggered when the player starts seeking to a specific time. An `onTimeUpdate` event will also be fired at the same time. |
 | onSeeked | function |  | Triggered when the player seeks to a specific time. An `onTimeUpdate` event will also be fired at the same time. |
 | onTextTrackChange | function |  | Triggered when the active text track (captions/subtitles) changes. The values will be `null` if text tracks are turned off. |
+| onChapterChange | function |  | Triggered when the current chapter changes. |
 | onCueChange | function |  | Triggered when the active cue for the current text track changes. It also fires when the active text track changes. There may be multiple cues active. |
 | onCuePoint | function |  | Triggered when the current time hits a registered cue point. |
 | onVolumeChange | function |  | Triggered when the volume in the player changes. Some devices do not support setting the volume of the video independently from the system volume, so this event will never fire on those devices. |
 | onPlaybackRateChange | function |  | Triggered when the playback rate changes. |
+| onBufferStart | function |  | Triggered when buffering starts in the player. This is also triggered during preload and while seeking. |
+| onBufferEnd | function |  | Triggered when buffering ends in the player. This is also triggered at the end of preload and seeking. |
 | onLoaded | function |  | Triggered when a new video is loaded in the player. |
+| onDurationChange | function |  | Triggered when the duration attribute has been updated. |
+| onFullscreenChange | function |  | Triggered when the player enters or exits fullscreen. |
+| onQualityChange | function |  | Triggered when the set quality changes. |
+| onCameraChange | function |  | Triggered when any of the camera properties change for 360° videos. |
+| onResize | function |  | Triggered when the intrinsic size of the media changes. |
+| onEnterPictureInPicture | function |  | Triggered when the player enters picture-in-picture. |
+| onLeavePictureInPicture | function |  | Triggered when the player leaves picture-in-picture. |
 
 ## Related
 
diff --git a/example/app.js b/example/app.js
index 469bb81..4f86ea2 100644
--- a/example/app.js
+++ b/example/app.js
@@ -1,6 +1,5 @@
-/* global document */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import Vimeo from '@u-wave/react-vimeo'; // eslint-disable-line import/no-unresolved
 
 const videos = [
@@ -62,6 +61,7 @@ class App extends React.Component {
           <div className="collection">
             {videos.map((choice, index) => (
               <a
+                key={choice.id}
                 href={`#!/video/${index}`}
                 className={`collection-item ${video === choice ? 'active' : ''}`}
                 onClick={() => this.selectVideo(index)}
@@ -113,5 +113,5 @@ class App extends React.Component {
   }
 }
 
-// eslint-disable-next-line react/no-deprecated
-ReactDOM.render(<App />, document.getElementById('example'));
+const root = ReactDOM.createRoot(document.querySelector('#example'));
+root.render(<App />);
diff --git a/example/index.html b/example/index.html
index 0d192b9..8784144 100644
--- a/example/index.html
+++ b/example/index.html
@@ -20,7 +20,7 @@
     <nav class="primary">
       <div class="nav-wrapper">
         <a href="https://u-wave.net" class="logo-wrapper">
-          <img src="https://u-wave.net/static/images/logo-white.png" alt="" class="logo">
+          <img src="https://u-wave.net/images/logo-white.png" alt="" class="logo">
         </a>
         <ul id="nav-mobile" class="right hide-on-med-and-down">
           <li><a href="https://hub.u-wave.net/" class="white-text btn-flat">Join</a></li>
diff --git a/example/package.json b/example/package.json
index 4af99e3..cf964e0 100644
--- a/example/package.json
+++ b/example/package.json
@@ -5,7 +5,7 @@
   "version": "0.0.0-example",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "esbuild --bundle app.js --loader:.js=jsx --sourcemap=inline --minify > bundle.js",
+    "build": "esbuild --bundle app.js --loader:.js=jsx --sourcemap=inline --minify-whitespace --minify-syntax > bundle.js",
     "start": "serve ."
   },
   "dependencies": {
diff --git a/index.d.ts b/index.d.ts
index 3a15f58..bb3e883 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,158 +1,15 @@
 import * as React from 'react'
-import Player, { Error } from '@vimeo/player'
+import Player, {
+  Error,
+  EventMap,
+  VimeoVideoQuality,
+} from '@vimeo/player'
 
-export type PlayEvent = {
-  /**
-   * The length of the video in seconds.
-   */
-  duration: number
-  /**
-   * The amount of the video, in seconds, that has played.
-   */
-  seconds: number
-  /**
-   * The amount of the video that has played in comparison to the length of the video;
-   * multiply by 100 to obtain the percentage.
-   */
-  percent: number
-}
-
-export type PlayingEvent = PlayEvent;
-
-export type PauseEvent = {
-  /**
-   * The length of the video in seconds.
-   */
-  duration: number
-  /**
-   * The amount of the video, in seconds, that has played to the pause position.
-   */
-  seconds: number
-  /**
-   * The amount of the video that has played to the pause position in comparison to the length of the video; multiply by 100 to obtain the percentage.
-   */
-  percent: number
-}
-
-export type EndEvent = PauseEvent
-
-export type TimeUpdateEvent = {
-  /**
-   * The length of the video in seconds.
-   */
-  duration: number
-  /**
-   * The amount of the video, in seconds, that has played from the current playback position.
-   */
-  seconds: number
-  /**
-   * The amount of the video that has played from the current playback position in comparison to the length of the video; multiply by 100 to obtain the percentage.
-   */
-  percent: number
-}
-
-export type ProgressEvent = {
-  /**
-   * The length of the video in seconds.
-   */
-  duration: number
-  /**
-   * The amount of the video, in seconds, that has buffered.
-   */
-  seconds: number
-  /**
-   * The amount of the video that has buffered in comparison to the length of the video;
-   * multiply by 100 to obtain the percentage.
-   */
-  percent: number
-}
-
-export type SeekedEvent = {
-  /**
-   * The length of the video in seconds.
-   */
-  duration: number
-  /**
-   * The amount of the video, in seconds, that has played from the new seek position.
-   */
-  seconds: number
-  /**
-  * The amount of the video that has played from the new seek position in comparison to the length of the video; multiply by 100 to obtain the percentage.
-   */
-  percent: number
-}
-
-export type TextTrackEvent = {
-  kind: 'captions' | 'subtitles'
-  label: string
-  language: string
-}
-
-export type Cue = {
-  html: string
-  text: string
-}
-
-export type CueChangeEvent = {
-  cues: Cue[]
-  kind: 'captions' | 'subtitles'
-  label: string
-  language: string
-}
-
-export type CuePointEvent = {
-  /**
-   * The location of the cue point in seconds.
-   */
-  time: number
-  /**
-   * The ID of the cue point.
-   */
-  id: string
-  /**
-   * The custom data from the `addCuePoint()` call, or an empty object.
-   */
-  data: object
-}
-
-export type VolumeEvent = {
-  /**
-   * The new volume level.
-   */
-  volume: number
-}
-
-export type PlaybackRateEvent = {
-  /**
-   * The new playback rate.
-   */
-  playbackRate: number
-}
-
-export type LoadEvent = {
-  /**
-   * The ID of the new video.
-   */
-  id: number
-}
-
-export interface VimeoProps {
+export interface VimeoOptions {
   /**
    * A Vimeo video ID or URL.
    */
   video: number | string
-  /**
-   * DOM ID for the player element.
-   */
-  id?: string
-  /**
-   * CSS className for the player element.
-   */
-  className?: string
-  /**
-   * Inline style for container element.
-   */
-  style?: React.CSSProperties
   /**
    * Width of the player element.
    */
@@ -271,7 +128,7 @@ export interface VimeoProps {
    * Vimeo Plus, PRO, and Business members can default
    * an embedded video to a specific quality on desktop.
    */
-  quality?: string
+  quality?: VimeoVideoQuality
 
   /**
    * Turn captions/subtitles on for a specific language by default.
@@ -296,64 +153,120 @@ export interface VimeoProps {
   /**
    * Triggered when video playback is initiated.
    */
-  onPlay?: (event: PlayEvent) => void
-  /**
-   * Triggered when the video starts playing.
-   */
-  onPlaying?: (event: PlayingEvent) => void
+  onPlay?: (event: EventMap['play']) => void
   /**
    * Triggered when the video pauses.
    */
-  onPause?: (event: PauseEvent) => void
+  onPause?: (event: EventMap['pause']) => void
   /**
    * Triggered any time the video playback reaches the end.
    * Note: when `loop` is turned on, the ended event will not fire.
    */
-  onEnd?: (event: EndEvent) => void
+  onEnd?: (event: EventMap['ended']) => void
   /**
    * Triggered as the `currentTime` of the video updates. It generally fires
    * every 250ms, but it may vary depending on the browser.
    */
-  onTimeUpdate?: (event: TimeUpdateEvent) => void
+  onTimeUpdate?: (event: EventMap['timeupdate']) => void
   /**
    * Triggered as the video is loaded. Reports back the amount of the video
    * that has been buffered.
    */
-  onProgress?: (event: ProgressEvent) => void
+  onProgress?: (event: EventMap['progress']) => void
+  /**
+   * Triggered when the player starts seeking to a specific time. An
+   * `onTimeUpdate` event will also be fired at the same time.
+   */
+  onSeeking?: (event: EventMap['seeking']) => void
   /**
    * Triggered when the player seeks to a specific time. An `onTimeUpdate`
    * event will also be fired at the same time.
    */
-  onSeeked?: (event: SeekedEvent) => void
+  onSeeked?: (event: EventMap['seeked']) => void
   /**
    * Triggered when the active text track (captions/subtitles) changes. The
    * values will be `null` if text tracks are turned off.
    */
-  onTextTrackChange?: (event: TextTrackEvent) => void
+  onTextTrackChange?: (event: EventMap['texttrackchange']) => void
+  /**
+   * Triggered when the current chapter changes.
+   */
+  onChapterChange?: (event: EventMap['chapterchange']) => void
   /**
    * Triggered when the active cue for the current text track changes. It also
    * fires when the active text track changes. There may be multiple cues
    * active.
    */
-  onCueChange?: (event: CueChangeEvent) => void
+  onCueChange?: (event: EventMap['cuechange']) => void
   /**
    * Triggered when the current time hits a registered cue point.
    */
-  onCuePoint?: (event: CuePointEvent) => void
+  onCuePoint?: (event: EventMap['cuepoint']) => void
   /**
    * Triggered when the volume in the player changes. Some devices do not
    * support setting the volume of the video independently from the system
    * volume, so this event will never fire on those devices.
    */
-  onVolumeChange?: (event: VolumeEvent) => void
+  onVolumeChange?: (event: EventMap['volumechange']) => void
   /**
    * Triggered when the playback rate in the player changes.
    */
-  onPlaybackRateChange?: (event: PlaybackRateEvent) => void
+  onPlaybackRateChange?: (event: EventMap['playbackratechange']) => void
+  /**
+   * Triggered when buffering starts in the player. This is also triggered during preload and while seeking.
+   */
+  onBufferStart?: () => void
+  /**
+   * Triggered when buffering ends in the player. This is also triggered at the end of preload and seeking.
+   */
+  onBufferEnd?: () => void
   /**
    * Triggered when a new video is loaded in the player.
    */
-  onLoaded?: (event: LoadEvent) => void
+  onLoaded?: (event: EventMap['loaded']) => void
+  /**
+   * Triggered when the duration attribute has been updated.
+   */
+  onDurationChange?: (event: EventMap['durationchange']) => void
+  /**
+   * Triggered when the player enters or exits fullscreen.
+   */
+  onFullscreenChange?: (event: EventMap['fullscreenchange']) => void
+  /**
+   * Triggered when the set quality changes.
+   */
+  onQualityChange?: (event: EventMap['qualitychange']) => void
+  /**
+   * Triggered when any of the camera properties change for 360° videos.
+   */
+  onCameraChange?: (event: EventMap['camerachange']) => void
+  /**
+   * Triggered when the intrinsic size of the media changes.
+   */
+  onResize?: (event: EventMap['resize']) => void
+  /**
+   * Triggered when the player enters picture-in-picture.
+   */
+  onEnterPictureInPicture?: () => void
+  /**
+   * Triggered when the player leaves picture-in-picture.
+   */
+  onLeavePictureInPicture?: () => void
+}
+
+export interface VimeoProps extends VimeoOptions {
+  /**
+   * DOM ID for the player element.
+   */
+  id?: string
+  /**
+   * CSS className for the player element.
+   */
+  className?: string
+  /**
+   * Inline style for container element.
+   */
+  style?: React.CSSProperties
 }
 
 /**
diff --git a/package.json b/package.json
index 4e31d55..aefa4b8 100644
--- a/package.json
+++ b/package.json
@@ -2,15 +2,21 @@
   "name": "@u-wave/react-vimeo",
   "version": "0.9.11",
   "description": "Vimeo player component for React.",
-  "main": "dist/react-vimeo.js",
-  "module": "dist/react-vimeo.es.js",
+  "main": "./dist/react-vimeo.js",
+  "module": "./dist/react-vimeo.mjs",
+  "exports": {
+    ".": {
+      "require": "./dist/react-vimeo.js",
+      "import": "./dist/react-vimeo.mjs"
+    }
+  },
   "types": "index.d.ts",
   "scripts": {
     "prepare": "npm run build",
     "build": "rollup -c",
     "lint": "eslint --cache .",
     "test": "npm run lint && npm run tests-only && npm run tsd",
-    "tests-only": "cross-env BABEL_ENV=test mocha --require @babel/register test/*.js",
+    "tests-only": "cross-env BABEL_ENV=test c8 mocha --require @babel/register test/*.js",
     "tsd": "tsd",
     "docs": "prop-types-table src/index.js | md-insert README.md --header Props -i",
     "example": "npm run --prefix example build"
@@ -33,13 +39,12 @@
   },
   "homepage": "https://github.com/u-wave/react-vimeo#readme",
   "dependencies": {
-    "@types/react": "^17.0.0 || ^18.0.0",
+    "@types/react": ">= 16.0.0",
     "@types/vimeo__player": "^2.10.0",
-    "@vimeo/player": "^2.16.4",
-    "prop-types": "^15.7.2"
+    "@vimeo/player": "^2.16.4"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": ">= 16.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -49,9 +54,9 @@
     "@rollup/plugin-babel": "^6.0.0",
     "@u-wave/react-vimeo-example": "file:example",
     "babel-plugin-dynamic-import-node": "^2.3.3",
+    "c8": "^7.12.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.2.0",
-    "eslint-config-airbnb": "^19.0.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.27.0",
diff --git a/src/eventNames.js b/src/eventNames.js
deleted file mode 100644
index 97f1f9b..0000000
--- a/src/eventNames.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export default {
-  play: 'onPlay',
-  playing: 'onPlaying',
-  pause: 'onPause',
-  ended: 'onEnd',
-  timeupdate: 'onTimeUpdate',
-  progress: 'onProgress',
-  seeked: 'onSeeked',
-  texttrackchange: 'onTextTrackChange',
-  cuechange: 'onCueChange',
-  cuepoint: 'onCuePoint',
-  volumechange: 'onVolumeChange',
-  playbackratechange: 'onPlaybackRateChange',
-  error: 'onError',
-  loaded: 'onLoaded',
-};
diff --git a/src/index.js b/src/index.js
index 9f1b43b..ad99499 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,449 +1,319 @@
+// @ts-check
 import React from 'react';
-import PropTypes from 'prop-types';
 import Player from '@vimeo/player';
-import eventNames from './eventNames';
 
-class Vimeo extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.refContainer = this.refContainer.bind(this);
-  }
-
-  componentDidMount() {
-    this.createPlayer();
-  }
-
-  componentDidUpdate(prevProps) {
-    // eslint-disable-next-line react/destructuring-assignment
-    const changes = Object.keys(this.props).filter((name) => this.props[name] !== prevProps[name]);
+/** @typedef {import('@vimeo/player').EventMap} EventMap */
+/**
+ * @template {any} Data
+ * @typedef {import('@vimeo/player').EventCallback<Data>} EventCallback
+ */
+
+const {
+  useEffect,
+  useRef,
+  useState,
+} = React;
+
+/**
+ * @param {React.RefObject<HTMLElement>} container
+ * @param {import('@vimeo/player').Options} options
+ */
+function useVimeoPlayer(container, options) {
+  // Storing the player in the very first hook makes it easier to
+  // find in React DevTools :)
+  const [player, setPlayer] = useState(/** @type {Player | null} */ (null));
+
+  // The effect that manages the player's lifetime.
+  useEffect(() => {
+    const instance = new Player(container.current, options);
+    setPlayer(instance);
+
+    return () => {
+      instance.destroy();
+    };
+  }, []);
 
-    this.updateProps(changes);
-  }
+  return player;
+}
 
-  componentWillUnmount() {
-    this.player.destroy();
-  }
+/**
+ * Use an effect with a maybe-existing player.
+ *
+ * @param {Player|null} player
+ * @param {() => void | (() => void)} callback
+ * @param {unknown[]} dependencies
+ */
+function usePlayerEffect(player, callback, dependencies) {
+  useEffect(() => {
+    if (player) callback();
+  }, [player, ...dependencies]);
+}
 
-  /**
-   * @private
-   */
-  getInitialOptions() {
-    const { video } = this.props;
-    const videoType = /^https?:/i.test(video) ? 'url' : 'id';
-    /* eslint-disable react/destructuring-assignment */
-    return {
-      [videoType]: video,
-      width: this.props.width,
-      height: this.props.height,
-      autopause: this.props.autopause,
-      autoplay: this.props.autoplay,
-      byline: this.props.showByline,
-      color: this.props.color,
-      controls: this.props.controls,
-      loop: this.props.loop,
-      portrait: this.props.showPortrait,
-      title: this.props.showTitle,
-      muted: this.props.muted,
-      background: this.props.background,
-      responsive: this.props.responsive,
-      dnt: this.props.dnt,
-      speed: this.props.speed,
-      keyboard: this.props.keyboard,
-      pip: this.props.pip,
-      playsinline: this.props.playsInline,
-      quality: this.props.quality,
-      texttrack: this.props.textTrack,
-      transparent: this.props.transparent,
+/**
+ * Attach an event listener to a Vimeo player.
+ *
+ * @template {keyof EventMap} K
+ * @param {Player} player
+ * @param {K} event
+ * @param {EventCallback<EventMap[K]>} handler
+ */
+function useEventHandler(player, event, handler) {
+  usePlayerEffect(player, () => {
+    if (handler) {
+      player.on(event, handler);
+    }
+    return () => {
+      if (handler) {
+        player.off(event, handler);
+      }
     };
-    /* eslint-enable react/destructuring-assignment */
-  }
+  }, [event, handler]);
+}
 
-  /**
-   * @private
-   */
-  updateProps(propNames) {
-    const { player } = this;
-    propNames.forEach((name) => {
-      // eslint-disable-next-line react/destructuring-assignment
-      const value = this.props[name];
-      switch (name) {
-        case 'autopause':
-          player.setAutopause(value);
-          break;
-        case 'color':
-          player.setColor(value);
-          break;
-        case 'loop':
-          player.setLoop(value);
-          break;
-        case 'volume':
-          player.setVolume(value);
-          break;
-        case 'paused':
-          player.getPaused().then((paused) => {
-            if (value && !paused) {
-              return player.pause();
-            }
-            if (!value && paused) {
-              return player.play();
-            }
-            return null;
-          });
-          break;
-        case 'width':
-        case 'height':
-          player.element[name] = value;
-          break;
-        case 'video':
-          if (value) {
-            const { start } = this.props;
-            const loaded = player.loadVideo(value);
-            // Set the start time only when loading a new video.
-            // It seems like this has to be done after the video has loaded, else it just starts at
-            // the beginning!
-            if (typeof start === 'number') {
-              loaded.then(() => {
-                player.setCurrentTime(start);
-              });
-            }
-          } else {
-            player.unload();
-          }
-          break;
-        case 'playbackRate':
-          player.setPlaybackRate(value);
-          break;
-        case 'quality':
-          player.setQuality(value);
-          break;
-        default:
-          // Nothing
-      }
-    });
+/**
+ * @param {string|number|null} video
+ */
+function getVideoProps(video) {
+  if (video == null) {
+    return undefined;
   }
 
-  /**
-   * @private
-   */
-  createPlayer() {
-    const { start, volume, playbackRate } = this.props;
-
-    this.player = new Player(this.container, this.getInitialOptions());
-
-    Object.keys(eventNames).forEach((dmName) => {
-      const reactName = eventNames[dmName];
-      this.player.on(dmName, (event) => {
-        // eslint-disable-next-line react/destructuring-assignment
-        const handler = this.props[reactName];
-        if (handler) {
-          handler(event);
-        }
-      });
-    });
+  return typeof video === 'number' || /^\d+$/.test(video)
+    ? { id: Number(video) }
+    : { url: video };
+}
 
-    const { onError, onReady } = this.props;
-    this.player.ready().then(() => {
-      if (onReady) {
-        onReady(this.player);
+/**
+ * @param {React.RefObject<HTMLElement>} container
+ * @param {import('../index').VimeoOptions} options
+ */
+function useVimeo(container, {
+  video,
+  width,
+  height,
+  autopause = true,
+  autoplay = false,
+  showByline = true,
+  color,
+  controls = true,
+  loop = false,
+  showPortrait = true,
+  showTitle = true,
+  muted = false,
+  background = false,
+  responsive = false,
+  playbackRate,
+  dnt = false,
+  speed = false,
+  keyboard = false,
+  pip = false,
+  playsInline = true,
+  quality,
+  textTrack,
+  transparent = true,
+  paused,
+  volume,
+  start,
+
+  // Events
+  onReady,
+  onError,
+  onPlay,
+  onPause,
+  onEnd,
+  onTimeUpdate,
+  onProgress,
+  onSeeking,
+  onSeeked,
+  onTextTrackChange,
+  onChapterChange,
+  onCueChange,
+  onCuePoint,
+  onVolumeChange,
+  onPlaybackRateChange,
+  onBufferStart,
+  onBufferEnd,
+  onLoaded,
+  onDurationChange,
+  onFullscreenChange,
+  onQualityChange,
+  onCameraChange,
+  onResize,
+  onEnterPictureInPicture,
+  onLeavePictureInPicture,
+}) {
+  const isFirstRender = useRef(true);
+  const player = useVimeoPlayer(container, {
+    ...getVideoProps(video),
+    // The Vimeo player officially only supports integer width/height.
+    // If a "100%" string was provided we apply it afterwards in an effect.
+    width: typeof width === 'number' ? width : undefined,
+    height: typeof height === 'number' ? height : undefined,
+    autopause,
+    autoplay,
+    byline: showByline,
+    color,
+    controls,
+    loop,
+    portrait: showPortrait,
+    title: showTitle,
+    muted,
+    background,
+    responsive,
+    dnt,
+    speed,
+    keyboard,
+    pip,
+    playsinline: playsInline,
+    quality,
+    texttrack: textTrack,
+    transparent,
+  });
+
+  // Initial player setup.
+  // This effect should only run once *and* it's async,
+  // so the most reliable thing to do is to put all its dependencies in a mutable ref.
+  const initState = useRef({ onReady, onError, start });
+  Object.assign(initState.current, { onReady, onError, start });
+  usePlayerEffect(player, () => {
+    let cancelled = false;
+
+    player.ready().then(() => {
+      if (cancelled) {
+        return;
       }
+      if (initState.current.start) {
+        player.setCurrentTime(initState.current.start);
+      }
+
+      initState.current.onReady?.(player);
     }, (err) => {
-      if (onError) {
-        onError(err);
+      if (cancelled) {
+        return;
+      }
+      if (initState.current.onError) {
+        initState.current.onError(err);
       } else {
         throw err;
       }
     });
-
-    if (typeof start === 'number') {
-      this.player.setCurrentTime(start);
-    }
-
-    if (typeof volume === 'number') {
-      this.updateProps(['volume']);
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEventHandler(player, 'error', onError);
+  useEventHandler(player, 'play', onPlay);
+  useEventHandler(player, 'pause', onPause);
+  useEventHandler(player, 'ended', onEnd);
+  useEventHandler(player, 'timeupdate', onTimeUpdate);
+  useEventHandler(player, 'progress', onProgress);
+  useEventHandler(player, 'seeking', onSeeking);
+  useEventHandler(player, 'seeked', onSeeked);
+  useEventHandler(player, 'texttrackchange', onTextTrackChange);
+  useEventHandler(player, 'chapterchange', onChapterChange);
+  useEventHandler(player, 'cuechange', onCueChange);
+  useEventHandler(player, 'cuepoint', onCuePoint);
+  useEventHandler(player, 'volumechange', onVolumeChange);
+  useEventHandler(player, 'playbackratechange', onPlaybackRateChange);
+  useEventHandler(player, 'bufferstart', onBufferStart);
+  useEventHandler(player, 'bufferend', onBufferEnd);
+  useEventHandler(player, 'durationchange', onDurationChange);
+  useEventHandler(player, 'fullscreenchange', onFullscreenChange);
+  useEventHandler(player, 'qualitychange', onQualityChange);
+  useEventHandler(player, 'camerachange', onCameraChange);
+  useEventHandler(player, 'resize', onResize);
+  useEventHandler(player, 'enterpictureinpicture', onEnterPictureInPicture);
+  useEventHandler(player, 'leavepictureinpicture', onLeavePictureInPicture);
+  useEventHandler(player, 'loaded', onLoaded);
+
+  usePlayerEffect(player, () => {
+    player.setAutopause(autopause);
+  }, [autopause]);
+  usePlayerEffect(player, () => {
+    if (color) player.setColor(color);
+  }, [color]);
+  usePlayerEffect(player, () => {
+    player.setPlaybackRate(playbackRate);
+  }, [playbackRate]);
+  usePlayerEffect(player, () => {
+    player.setLoop(loop);
+  }, [loop]);
+  usePlayerEffect(player, () => {
+    player.setVolume(volume);
+  }, [volume]);
+  usePlayerEffect(player, () => {
+    player.getPaused().then((prevPaused) => {
+      if (paused && !prevPaused) {
+        return player.pause();
+      }
+      if (!paused && prevPaused) {
+        return player.play();
+      }
+      return null;
+    });
+  }, [paused]);
+  usePlayerEffect(player, () => {
+    /** @type {HTMLIFrameElement} */ (/** @type {any} */ (player).element).width = String(width);
+  }, [width]);
+  usePlayerEffect(player, () => {
+    /** @type {HTMLIFrameElement} */ (/** @type {any} */ (player).element).height = String(height);
+  }, [height]);
+
+  usePlayerEffect(player, () => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return () => {};
     }
 
-    if (typeof playbackRate === 'number') {
-      this.updateProps(['playbackRate']);
+    let cancelled = false;
+    const videoProps = getVideoProps(video);
+    if (videoProps) {
+      const loaded = player.loadVideo(videoProps);
+      // Set the start time only when loading a new video.
+      // It seems like this has to be done after the video has loaded, else it just starts at
+      // the beginning!
+      if (typeof start === 'number') {
+        loaded.then(() => {
+          if (cancelled) {
+            return;
+          }
+          player.setCurrentTime(start);
+        });
+      }
+    } else {
+      player.unload();
     }
-  }
-
-  /**
-   * @private
-   */
-  refContainer(container) {
-    this.container = container;
-  }
-
-  render() {
-    const { id, className, style } = this.props;
+    return () => {
+      cancelled = true;
+    };
+  }, [video]);
 
-    return (
-      <div
-        id={id}
-        className={className}
-        style={style}
-        ref={this.refContainer}
-      />
-    );
-  }
+  return player;
 }
 
-if (process.env.NODE_ENV !== 'production') {
-  Vimeo.propTypes = {
-    /**
-     * A Vimeo video ID or URL.
-     */
-    video: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ]),
-    /**
-     * DOM ID for the player element.
-     */
-    id: PropTypes.string,
-    /**
-     * CSS className for the player element.
-     */
-    className: PropTypes.string,
-    /**
-     * Inline style for container element.
-     */
-    style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-    /**
-     * Width of the player element.
-     */
-    width: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ]),
-    /**
-     * Height of the player element.
-     */
-    height: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ]),
-
-    /**
-     * Pause the video.
-     */
-    paused: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
-
-    /**
-     * The playback volume as a number between 0 and 1.
-     */
-    volume: PropTypes.number,
-
-    /**
-     * The time in seconds at which to start playing the video.
-     */
-    start: PropTypes.number,
-
-    // Player parameters
-    /**
-     * Pause this video automatically when another one plays.
-     */
-    autopause: PropTypes.bool,
-
-    /**
-     * Automatically start playback of the video. Note that this won’t work on
-     * some devices.
-     */
-    autoplay: PropTypes.bool,
-
-    /**
-     * Show the byline on the video.
-     */
-    showByline: PropTypes.bool,
-
-    /**
-     * Specify the color of the video controls. Colors may be overridden by the
-     * embed settings of the video. _(Ex: "ef2f9f")_
-     */
-    color: PropTypes.string,
-
-    /**
-     * Blocks the player from tracking any session data, including all cookies and analytics.
-     */
-    dnt: PropTypes.bool,
-
-    // Player controls
-    /**
-     * Hide all elements in the player, such as the progress bar, sharing buttons, etc.
-     * (requires Vimeo PRO / Business account)
-     */
-    controls: PropTypes.bool,
-
-    /**
-     * Play the video again when it reaches the end.
-     */
-    loop: PropTypes.bool,
-
-    /**
-     * Show the portrait on the video.
-     */
-    showPortrait: PropTypes.bool,
-
-    /**
-     * Show the title on the video.
-     */
-    showTitle: PropTypes.bool,
-
-    /**
-     * Starts in a muted state to help with autoplay
-     */
-    muted: PropTypes.bool,
-
-    /**
-     * Starts in a background state with no controls to help with autoplay
-     */
-    background: PropTypes.bool,
-
-    /**
-     * Enable responsive mode and resize according to parent element (experimental)
-     */
-    responsive: PropTypes.bool,
-
-    /**
-     * Specify playback rate (requires Vimeo PRO / Business account)
-     */
-    playbackRate: PropTypes.number,
-
-    /**
-     * Enable playback rate controls (requires Vimeo PRO / Business account)
-     */
-    speed: PropTypes.bool,
-
-    /**
-     * Allows for keyboard input to trigger player events.
-     */
-    keyboard: PropTypes.bool,
-
-    /**
-     * Show the picture-in-picture button in the controlbar
-     * and enable the picture-in-picture API.
-     */
-    pip: PropTypes.bool,
-
-    /**
-     * Play video inline on mobile devices, to automatically
-     * go fullscreen on playback set this parameter to false.
-     */
-    playsInline: PropTypes.bool,
-
-    /**
-     * Vimeo Plus, PRO, and Business members can default
-     * an embedded video to a specific quality on desktop.
-     */
-    quality: PropTypes.string,
-
-    /**
-     * Turn captions/subtitles on for a specific language by default.
-     */
-    textTrack: PropTypes.string,
-
-    /**
-     * The responsive player and transparent background are enabled
-     * by default, to disable set this parameter to false.
-     */
-    transparent: PropTypes.bool,
-
-    // Events
-    /* eslint-disable react/no-unused-prop-types */
-
-    /**
-     * Sent when the Vimeo player API has loaded.
-     * Receives the Vimeo player object in the first parameter.
-     */
-    onReady: PropTypes.func,
-    /**
-     * Sent when the player triggers an error.
-     */
-    onError: PropTypes.func,
-    /**
-     * Triggered when video playback is initiated.
-     */
-    onPlay: PropTypes.func,
-    /**
-     * Triggered when the video starts playing.
-     */
-    onPlaying: PropTypes.func,
-    /**
-     * Triggered when the video pauses.
-     */
-    onPause: PropTypes.func,
-    /**
-     * Triggered any time the video playback reaches the end.
-     * Note: when `loop` is turned on, the ended event will not fire.
-     */
-    onEnd: PropTypes.func,
-    /**
-     * Triggered as the `currentTime` of the video updates. It generally fires
-     * every 250ms, but it may vary depending on the browser.
-     */
-    onTimeUpdate: PropTypes.func,
-    /**
-     * Triggered as the video is loaded. Reports back the amount of the video
-     * that has been buffered.
-     */
-    onProgress: PropTypes.func,
-    /**
-     * Triggered when the player seeks to a specific time. An `onTimeUpdate`
-     * event will also be fired at the same time.
-     */
-    onSeeked: PropTypes.func,
-    /**
-     * Triggered when the active text track (captions/subtitles) changes. The
-     * values will be `null` if text tracks are turned off.
-     */
-    onTextTrackChange: PropTypes.func,
-    /**
-     * Triggered when the active cue for the current text track changes. It also
-     * fires when the active text track changes. There may be multiple cues
-     * active.
-     */
-    onCueChange: PropTypes.func,
-    /**
-     * Triggered when the current time hits a registered cue point.
-     */
-    onCuePoint: PropTypes.func,
-    /**
-     * Triggered when the volume in the player changes. Some devices do not
-     * support setting the volume of the video independently from the system
-     * volume, so this event will never fire on those devices.
-     */
-    onVolumeChange: PropTypes.func,
-    /**
-     * Triggered when the playback rate changes.
-     */
-    onPlaybackRateChange: PropTypes.func,
-    /**
-     * Triggered when a new video is loaded in the player.
-     */
-    onLoaded: PropTypes.func,
-
-    /* eslint-enable react/no-unused-prop-types */
-  };
+/**
+ * @param {import('../index').VimeoProps} props
+ */
+function Vimeo({
+  id,
+  className,
+  style,
+  ...options
+}) {
+  /** @type {React.RefObject<HTMLDivElement>} */
+  const container = useRef(null);
+  useVimeo(container, options);
+
+  return (
+    <div
+      id={id}
+      className={className}
+      style={style}
+      ref={container}
+    />
+  );
 }
 
-Vimeo.defaultProps = {
-  autopause: true,
-  autoplay: false,
-  showByline: true,
-  controls: true,
-  loop: false,
-  showPortrait: true,
-  showTitle: true,
-  muted: false,
-  background: false,
-  responsive: false,
-  dnt: false,
-  speed: false,
-  keyboard: true,
-  pip: false,
-  playsInline: true,
-  transparent: true,
-};
-
+export { useVimeo };
 export default Vimeo;
diff --git a/test/test.js b/test/test.js
index 018f91d..9ce4537 100644
--- a/test/test.js
+++ b/test/test.js
@@ -21,14 +21,13 @@ describe('Vimeo', () => {
     expect(sdkMock.calls[0].arguments[1]).toMatch({ url: 'https://vimeo.com/179290396' });
   });
 
-  it('should all onError when `ready()` fails', async () => {
+  it('should call onError when `ready()` fails', async () => {
     const onError = createSpy();
     const { sdkMock } = await render({
       video: 404,
       shouldFail: true,
       onError,
     });
-    await Promise.resolve();
     expect(sdkMock).toHaveBeenCalled();
     expect(sdkMock.calls[0].arguments[1]).toMatch({ id: 404 });
     expect(onError).toHaveBeenCalled();
@@ -45,7 +44,7 @@ describe('Vimeo', () => {
     await rerender({ video: 162959050 });
 
     expect(playerMock.loadVideo).toHaveBeenCalled();
-    expect(playerMock.loadVideo.calls[0].arguments[0]).toEqual(162959050);
+    expect(playerMock.loadVideo.calls[0].arguments[0]).toMatch({ id: 162959050 });
   });
 
   it('should pause the video using the "paused" prop', async () => {
@@ -137,7 +136,7 @@ describe('Vimeo', () => {
     });
 
     expect(playerMock.setWidth).toHaveBeenCalledWith('100%');
-    expect(playerMock.setHeight).toHaveBeenCalledWith(800);
+    expect(playerMock.setHeight).toHaveBeenCalledWith('800');
   });
 
   it('should set the playback rate using the "playbackRate" props', async () => {
diff --git a/test/util/createVimeo.js b/test/util/createVimeo.js
index df9248d..8e51296 100644
--- a/test/util/createVimeo.js
+++ b/test/util/createVimeo.js
@@ -50,8 +50,11 @@ export default function createVimeo({ shouldFail = false } = {}) {
   });
 
   const Vimeo = proxyquire.noCallThru().load('../../src/index.js', {
-    '@vimeo/player': function Player(...args) {
-      return sdkMock(...args);
+    '@vimeo/player': {
+      __esModule: true,
+      default: function Player(...args) {
+        return sdkMock(...args);
+      },
     },
   }).default;
 
diff --git a/test/util/render.js b/test/util/render.js
index 23bbca5..5609b48 100644
--- a/test/util/render.js
+++ b/test/util/render.js
@@ -22,7 +22,11 @@ async function render(initialProps) {
     shouldFail: initialProps.shouldFail,
   });
 
-  let component;
+  let resolveReady;
+  const readyPromise = new Promise((resolve) => {
+    resolveReady = resolve;
+  });
+
   // Emulate changes to component.props using a container component's state
   class Container extends React.Component {
     constructor(ytProps) {
@@ -31,14 +35,16 @@ async function render(initialProps) {
       this.state = { props: ytProps };
     }
 
+    componentDidMount() {
+      // Wait for the initial `setPlayer()` to be rendered.
+      setTimeout(() => resolveReady());
+    }
+
     render() {
       const { props } = this.state;
 
       return (
-        <Vimeo
-          ref={(vimeo) => { component = vimeo; }}
-          {...props}
-        />
+        <Vimeo {...props} />
       );
     }
   }
@@ -60,9 +66,13 @@ async function render(initialProps) {
       },
     };
   }
+
   const container = await new Promise((resolve) => {
-    root.render(<Container {...initialProps} ref={resolve} />);
+    (act || noAct)(() => {
+      root.render(<Container {...initialProps} ref={resolve} />);
+    });
   });
+  await readyPromise;
 
   function rerender(newProps) {
     return (act || noAct)(async () => {
@@ -70,16 +80,15 @@ async function render(initialProps) {
     });
   }
 
-  function unmount() {
-    root.unmount();
-  }
-
   return {
     sdkMock,
     playerMock,
-    component,
     rerender,
-    unmount,
+    unmount() {
+      act(() => {
+        root.unmount();
+      });
+    },
   };
 }