@pxljp/pxl-player-react v0.2.2

Pxl Player React

Pxl Player React is a wrapper of the Pxl Player for React projects.

Install

npm i --save @pxljp/pxl-player-react

Usage

Parameters

export type PxlPlayerInitOptions = {
  eventId: string; // Event from pxl
  clientId: string; // Your OAuth2 client id
  code: string; // Code for OAuth2 authentication
  endpoint: string; // Endpoint used with `domain` to call for authentification
  domain: string; // Your pxl domain address (https://XXX.asn.jp)
  rootElement: RootElement; // The HTML element to add the pxl player as child
  i18n?: Language; // optional, en_US by default, interface language setup (en_US or ja_JP)
};

export const PagePlayer = () => {
  const element = useRef<HTMLDivElement>(null);

  initPxlPlayer({
    rootElement: element.current,
    clientId: 'XXXX',
    code: 'YYYY',
    endpoint: 'uri/to/endpoint',
    eventId: 'EVENT-ID-XXXX-YYYY-ZZZZ',
    domain: 'https://YOUR-ARTIST.asn.jp/',
    i18n: 'en_US',
    useChat: false,
  });
  return (
    <>
      <div ref={element} />
    </>
  );
};