---
title: "Create a player for React.js"
slug: "vpe-example-react"
updated: 2026-09-17T09:22:43Z
published: 2026-09-17T09:22:43Z
canonical: "guide.ncloud-docs.com/vpe-example-react"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Create a player for React.js

Available in Classic and VPC

Applying a player for React.js describes the example for applying and setting a player with Video Player Enhancement Web SDK JS.

              Note

              

To implement the React.js example, the following environment is required:

- React Version: 18.2.0 (`react-dom` version: 18.2.0)

## Dynamic insertion of script tags

In React.js, you can apply a player by dynamically inserting a script tag. The following is how to dynamically insert script tags:

1. Write the following code in the relevant .js or .jsx component file and add a script tag:

```
const script = document.createElement("script");
const access_key = "VPE SDK Access Key"; // VPE SDK issue key

script.async = true;
script.src = "https://player.vpe.naverncp.com/ncplayer.js?access_key="+access_key;
document.body.appendChild(script);
```
2. Handle tasks such as loading external JavaScript in React components as side effects.
  - Use the `useEffect()` hook to enable the script when the component enters. (see [useScrpit](https://usehooks.com/useScript/))
3. Write it with the following code, creating `useScript.jsx`file in the `src/hooks` directory:

```
import {useEffect, useState} from "react";
export default function useScript(url) {
     const [status, setStatus] = useState(url ? "loading" : "error");
      useEffect(() => {
          if (!url) {
           setStatus("error");
           return;
          }

          let script = document.querySelector(`script[src="${url}"]`);

          if (!script) {
           console.log("script not found, creating new one...")
           script = document.createElement(("script"));
           script.src = url;
           script.async = true;
           script.setAttribute("data-status", "loading");
           document.body.appendChild(script);

           const setAttributeFromEvent = (event) => {
            script.setAttribute(
                "data-status",
                event.type === "load" ? "ready" : "error"
            );
            setStateFromEvent(event.type);
           }

           script.addEventListener("load", setAttributeFromEvent);
           script.addEventListener("error", setAttributeFromEvent);
          } else {
           setStatus(script.getAttribute("data-status"));
          }
          const setStateFromEvent = (event) => {
           setStatus(event.type === "load" ? "ready" : "error");
          }

          script.addEventListener("load", setStateFromEvent);
          script.addEventListener("error", setStateFromEvent);

          return () => {

           if (script) {
            script.removeEventListener("load", setStateFromEvent);
            script.removeEventListener("error", setStateFromEvent);
           }
          };
      }, [url]);

      return status;
     }
```
  - You can manage them by modifying a status value for both when the script is loaded and an error occurs.
4. Load a player when a script is normally called using `useScript` in a page and a component.
  - DemoPlayer.jsx

```
import useScript from "./hooks/useScript";
import {useEffect} from "react";

const access_key = "VPE SDK Access Key"; // Issued VPE license key
const url = "https://player.vpe.naverncp.com/ncplayer.js?access_key=" + access_key;

function createPlayer(id) {

    let player = new ncplayer(id, {

        "playlist": [
            {
                file: "https://rhhwgjjetcsm16398693.cdn.ntruss.com/live/video/ls-20230309164515-SCFQE/playlist.m3u8",
                poster: "https://wnfosehmzhuc12665447.cdn.ntruss.com/thumb/sample_thumb.pngtype=m&w=1024&h=760&ttype=jpg",
                description: {
                    "title": "LIVE ERROR test video",
                    "created_at": "2022.07.13",
                    "profile_name": "NAVER Cloud",
                    "profile_image":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                },
            }
        ],
        // options...
    });
}

function DemoPlayer() {
    let status = useScript(url);
        useEffect(() => {
            if (status === "ready") { 
                // Create a player with the script ready
                createPlayer('video');
            }
            else {
                console.log("not ready", url)
            }
        }, [status]);

    return (
      <>
         <div>
           <div id="video"></div>
         </div>
      </>
    )
}
export default DemoPlayer
```