WebPlayer with React.js

Installation

npm

npm install @car-cutter/react-webplayer

Yarn

yarn add @car-cutter/react-webplayer

pnpm

pnpm add @car-cutter/react-webplayer

Usage

React 18+

import { WebPlayer } from "@car-cutter/react-webplayer";

React 16.8 - 17.x

import { WebPlayer } from "@car-cutter/react-webplayer/legacy";

Then, use the component as: <WebPlayer compositionUrl={url} />

Quick start

React 18+

/src/App.jsx

import { WebPlayer } from "@car-cutter/react-webplayer";

const App = () => {
  return (
    <main>
      <h1>React App</h1>
      <WebPlayer
        style={{ maxWidth: "800px", marginInline: "auto", marginTop: "16px" }}
        compositionUrl="https://cdn.car-cutter.com/libs/web-player/v3/demos/composition.json"
        infiniteCarrousel
        onCompositionLoaded={() => console.log("Composition loaded")}
      />
    </main>
  );
};

export default App;

React 16.8 - 17.x

/src/App.jsx

import { WebPlayer } from "@car-cutter/react-webplayer/legacy";

const App = () => {
  return (
    <main>
      <h1>React App</h1>
      <WebPlayer
        style={{ maxWidth: "800px", marginInline: "auto", marginTop: "16px" }}
        compositionUrl="https://cdn.car-cutter.com/libs/web-player/v3/demos/composition.json"
        infiniteCarrousel
        onCompositionLoaded={() => console.log("Composition loaded")}
      />
    </main>
  );
};

export default App;

Version Compatibility

• React 18 and above: Use the default import from @car-cutter/react-webplayer
• React 16.8 to 17.x: Use the legacy import from @car-cutter/react-webplayer/legacy
• React versions below 16.8 are not supported

Next steps

For more customisation, take a look at available props in the Properties section