Hooks

We provide the following custom hooks for easily use toggle and manage its state

UseToogle

We provide the powerful custom hook to control the modal close/open state

Here is the inerface of useToggle return type

interface UseToggleReturnType {
  isOpen: boolean; // default is false
  toggle: () => void; // toggle isOpen
  close: () => void; // close the modal, always set isOpen as false
}

Usage

UseToogle Example

/src/components/hooks/UseToggle.jsx

import React from 'react';
import {ModalVideo, useToggle} from '@baskvava/react-video-modal';

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

  return (
    <div>
      <h2>UseToogle Example</h2>
      <button
        onClick={toggle}
        className="v-btn">
        Click Me to Open Video Modal
      </button>
      <ModalVideo
        title="video"
        header="useToggle"
        width={800}
        isOpen={isOpen}
        onClosed={close}
        url="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
    </div>
  );
}

export default UseToogle;