react-videoask-hook
v1.0.5
Published
Easily manage Video Ask with a react hook
Downloads
6
Maintainers
Readme
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
$ 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 |