Overwolf Hooks
Custom hooks to help use overwolf api with the new react hooks technology.
Install
$ npm install --save overwolf-hooks
$ pnpm install --save overwolf-hooks
$ yarn add overwolf-hooks
How to use
- If you are not familiar with Overwolf overwolf api
- If you are not familiar with React hooks, take a look at the documentation
Hooks
- useWindow.tsx
import { useWindow } from 'overwolf-hooks';
const shouldDisplayLog = true;
const shouldListenToWindowStateChanges = true;
const Panel = () => {
const [desktopWindow] = useWindow("desktop", shouldDisplayLog,shouldListenToWindowStateChanges);
return (
<div>
<h1>Desktop Window</h1>
<button onClick={()=> desktopWindow?.minimize()}>Minimize</button>
<button onClick={()=> desktopWindow?.restore()}>Restore</button>
<button onClick={()=> desktopWindow?.maximize()}>Maximize</button>
<button onClick={()=> desktopWindow?.close()}>Close</button>
</div>
)
}
Force Window update
If you need to force update the window state, you can use the refreshState function.
import { useWindow } from "overwolf-hooks";
const shouldDisplayLog = true;
const shouldListenToWindowStateChanges = true;
//listenToWindowStateChanges is set to true to listen to window state changes, so you can read the window state from the desktopWindowStateChanged variable
const [desktopWindow, desktopWindowStateChanged, refreshState] = useWindow(
"desktop",
shouldDisplayLog,
shouldListenToWindowStateChanges
);
const Panel = () => {
useEffect(() => {
//........ any other code
//force update/rebind the window object
refreshState();
}, [refreshState]);
useEffect(() => {
//........ any other code
console.info("desktopWindowStateChanged", desktopWindowStateChanged);
}, [desktopWindowStateChanged]);
return <CustomComponent {...desktopWindow} />;
};
- useDrag.tsx
import { useEffect, useCallback } from "react";
import { useDrag, useWindow } from 'overwolf-hooks'
const shouldDisplayLog = true;
const Header = () => {
const [desktopWindow] = useWindow("desktop", shouldDisplayLog);
const { onDragStart, onMouseMove, setCurrentWindowID } = useDrag(null, shouldDisplayLog);
const updateDragWindow = useCallback(() => {
if (desktopWindow?.id) setCurrentWindowID(desktopWindow.id);
}, [desktopWindow, setCurrentWindowID]);
useEffect(updateDragWindow, [updateDragWindow])
return (
<header
onMouseDown={event => onDragStart(event)}
onMouseMove={event => onMouseMove(event)}>
Header Text
</header>
)
}
- useGameEventProvider.tsx
const REQUIRED_FEATURES = ["game_info", "match_info", "game_events"];
const RETRY_TIMES = 10;
const DISPLAY_OVERWOLF_HOOKS_LOGS = true;
const BackgroundWindow = () => {
const [ingame] = useWindow("ingame", DISPLAY_OVERWOLF_HOOKS_LOGS);
const { started, start, stop } = useGameEventProvider(
{
onInfoUpdates: (info) => { console.log("info", info); },
onNewEvents: (events) => { console.log("events", events); }),
},
REQUIRED_FEATURES,
RETRY_TIMES,
DISPLAY_OVERWOLF_HOOKS_LOGS
);
useEffect(() => {
start();
return () => stop();
}, [start, stop]);
return null;
}
- useRunningGame.tsx
import { useEffect } from "react";
import { useGameEventProvider, useRunningGame } from 'overwolf-hooks'
const shouldDisplayLog = true;
const Alert = () => {
const [currentGame] = useRunningGame(shouldDisplayLog);
useEffect(() => {
console.info("currentGame", currentGame);
}, [currentGame]);
return <p>Alert Window</p>
}
License
MIT © AlbericoD