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)
};
Attribute | Type | required? | default value | Description |
---|---|---|---|---|
eventId |
string |
required | none | Event id coming from admin.pxl |
clientId |
string |
required | none | OAuth2 client id |
code |
string |
required | none | OAuth2 code used for authentication |
endpoint |
string |
required | none | OAuth2 endpoint used with domain
|
domain |
string |
required | none | Domain URL of your pxl artist (https://XXX.asn.jp) |
rootElement |
HTMLElement or Element
|
required | none | The HTML element to add the pxl player as child |
i18n |
string |
optional | en_US |
Interface language (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} />
</>
);
};