react-videoask-hook v1.0.5

React Video Ask hook

Easily manage video ask on react

With this custom hook, you can easily use and customize the behavior of any videoask video!

Features

• Installation
• How to use
• Example

Installation

$ yarn add react-videoask-hook
# or
$ npm install react-videoask-hook

How to use

Basic usage

import { VideoAskProvider } from 'react-videoask-hook';

const App = () => {
  const videoAskConfig = {
    kind: 'widget',
    url: 'https://www.videoask.com/<video-id>',
    options: {
      widgetType: 'VideoThumbnailWindowTall',
      position: 'bottom-left',
    },
  };

  return (
    <VideoAskProvider config={config}>
      <p>My awesome app</p>
    </VideoAskProvider>
  );
};

With custom callbacks

import { VideoAskProvider } from 'react-videoask-hook';

const App = () => {
  const videoAskConfig = {
    kind: 'widget',
    url: 'https://www.videoask.com/<video-id>',
    options: {
      widgetType: 'VideoThumbnailWindowTall',
      position: 'bottom-left',
    },
  };

  return (
    <VideoAskProvider
      config={config}
      callbacks={{
        onMessage(params) {
          console.log(params);
        },
        onLoadModal() {
          console.log('on-load-modal');
        },
        onCloseModal(removeWidget) {
          console.log('on-close-modal');
        },
      }}
    >
      <p>My awesome app</p>
    </VideoAskProvider>
  );
};

Hook usage

import { useVideoAsk } from 'react-videoask-hook';

const MyComponent = () => {
  const { showWidget, hideWidget } = useVideoAsk();

  return (
    <>
      <button onClick={showWidget}>Show video ask</button>
    </>
  );
};

API

Todo |