Skip to main content

Getting Started

Install​

npm install @baskvava/react-video-modal

or

yarn add @baskvava/react-video-modal

Usage​

Basic Video Modal

/src/components/GettingStarter/BasicNoHeader.jsx
import React from 'react';
import {ModalVideo, useToggle} from '@baskvava/react-video-modal';

function BasicNoHeader() {
  const {isOpen, toggle, close} = useToggle();

  return (
    <div>
      <h2>Basic Video Modal</h2>
      <button onClick={toggle} className="v-btn">
        Click Me to Open Video Modal
      </button>

      <ModalVideo
        title="video"
        width={800}
        isOpen={isOpen}
        onClosed={close}
        url="https://storage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
      />
    </div>
  );
}

export default BasicNoHeader;

Video Modal with Header

/src/components/GettingStarter/Basic.jsx
import React from 'react';
import {ModalVideo, useToggle} from '@baskvava/react-video-modal';

function Basic() {
  const {isOpen, toggle, close} = useToggle();

  return (
    <div>
      <h2>Video Modal with Header</h2>

      <button onClick={toggle} className="v-btn">
        Click Me to Open Video Modal
      </button>

      <ModalVideo
        title="video"
        header="This is my first video"
        width={800}
        isOpen={isOpen}
        onClosed={close}
        url="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
    </div>
  );
}

export default Basic;