Skip to main content
Version: 11.13.0

Using with Preact

The Open Video UI for React also works with Preact, without any changes to your code. All you need to do is alias react (and react-dom) to preact/compat, as you would for any other React library.

Alias React to Preact​

Preact's documentation explains how to set up the alias for the most common bundlers, such as Vite, Webpack and Rollup. Once configured, you can import and use the Open Video UI for React as usual:

import { DefaultUI } from '@theoplayer/react-ui';

const App = () => <DefaultUI configuration={configuration} source={source} />;

Without a bundler​

If you're not using a bundler, you can alias react to preact/compat using an import map instead:

<script type="importmap">
    {
        "imports": {
            "preact": "https://esm.sh/preact@10",
            "preact/hooks": "https://esm.sh/preact@10/hooks",
            "preact/compat": "https://esm.sh/preact@10/compat",
            "react": "https://esm.sh/preact@10/compat",
            "react-dom/client": "https://esm.sh/preact@10/compat/client"
        }
    }
</script>

See examples/preact/default-ui.html for a complete example.