@pentaio/pentio-react

React wrapper for Pentio player.

This package renders the pentio-player web component and exposes a typed React API.

Install

npm i @pentaio/pentio-react

Quick start

import { useState } from "react";
import { PentioPlayer, type PentioPlayerController } from "@pentaio/pentio-react";

export default function App() {
  const [controller, setController] = useState<PentioPlayerController | null>(null);

  return (
    <div style={{ width: "100%", height: 420 }}>
      <PentioPlayer src="<assets-url-or-path>/pentio.pto" autoplay onReady={ctrl => setController(ctrl)} />

      <button onClick={() => controller?.play()}>Play</button>
      <button onClick={() => controller?.resume()}>Resume</button>
      <button onClick={() => controller?.pause()}>Pause</button>
      <button onClick={() => controller?.stop()}>Stop</button>
      <button onClick={() => controller?.setParam("Param_0", true)}>Set Param</button>
    </div>
  );
}

Props

• src?: string
• autoplay?: boolean
• width?: string | number
• height?: string | number
• onReady?: (controller) => void
• style?: React.CSSProperties
• className?: string

Ref API

PentioPlayerRef exposes:

• controller?: PentioPlayerController

License

MIT