React support?

[pateljoel]

Hello, this looks like an amazing project :)

Is it possible to use with React? Is there any samples for this?

[BMSVieira]

Hey, thanks! It's currently on the to-do list but there's a few big ones ahead of it.

[wonrax]

Working example in Next.js 13 app directory:

"use client";

import Moovie from "mooviejs";
import "mooviejs/css/moovie.css";
import { useEffect } from "react";

export default function Movies() {
  useEffect(() => {
    var demo = new Moovie({
      selector: "#moovie-player",
      dimensions: {
        width: "700px",
      },
      icons: {
        path: "/icons/",
      },
    });

    return () => {
      demo.destroy();
    };
  }, []);

  return (
    <div style={{ margin: 8 }}>
      <video id="moovie-player">
        <source src="example.com/file.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
  );
}

I'm not sure if this is safe to use because Moovie could conflict with React on the DOM thing.