Getting Started #

Installation #

Option 1: With NPM #

npm i uni-media

Option 2: With CDN #

<script src="https://cdn.jsdelivr.net/npm/uni-media@1/dist/index.global.js"></script>

Basic Usage #

In Vanilla HTML #

<uni-media src="any-url" />

In React.js #

See https://reactjs.org/docs/web-components.html#using-web-components-in-react.

import React from 'react'
import 'uni-media'

function MyComponent() {
  return (
    <div>
      <uni-media src="any-url" />
    </div>
  )
}

SSR in Frameworks like Next.js #

If your framework has SSR, it would be tricky to integrate a web-component.

In Next.js, you need to import after the App is loaded with useEffect(() => {}, []). Other frameworks will be like the same.

// pages/_app.tsx
export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    import('uni-media')
  }, [])

  return <Component {...pageProps} />
}

In Vue.js #

See https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue.

<script>
  import 'uni-media'
</script>
<template>
  <uni-media src="any-url" />
</template>