react-niconico

Overlay text like Niconico.

Online demo: https://react-niconico.vercel.app/

Installation

Using yarn:

$ yarn add react-niconico

Using npm:

$ npm install react-niconico

Usage

import { useEffect } from "react";
import { useNiconico } from "react-niconico";

export const App = () => {
  const [ref, emitText] = useNiconico();

  const handleClick = () => {
    emitText("Hello, World!");
  };

  return (
    <div>
      <video ref={ref} src="/sample.mp4" />
      <button onClick={handleClick}>Emit comment</button>
    </div>
  );
};

Options

const [ref, emitText] = useNiconico({
  // options...
});

| name | type | required | description | default | | ------------- | ------ | -------- | ------------------------------------ | -------------- | | displayMillis | number | optional | time to display text in milliseconds | 5000 | | fontSize | number | optional | font size of text (px) | 1/10 of height | | borderWidth | number | optional | width of the border | 4 |

License

MIT