Using <ix-video> custom element in React

React can render custom elements (Web Components), but it has trouble (opens new window) passing React props to custom element properties and event listeners.

We recommend using a wrapper like @lit-labs/react (opens new window) to wrap the custom element in a React component that passes props and synthetic events to the custom element.

Here's an example of how to wrap the custom element in a React component:

import * as React from 'react';
import {createComponent} from '@lit-labs/react';
import {IxVideo} from '@imgix/ix-video';

// wrap the component to
export const Video = createComponent(React, 'ix-video', IxVideo, {
  onSeeked: 'seeked',
});

// use the component
<Video
  controls
  source="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4"
  onSeeked={(e) => console.log(e)}
/>;