README.md

Overwolf Hooks

Custom hooks to help use overwolf api with the new react hooks technology.

Install

npm install --save 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

1. useWindow.ts

import React from "react";
import { useWindow } from 'overwolf-hooks'

const Panel:FC = ()=>{
const [desktopWindow] = useWindow("desktop");

return <>
          <p>Desktop Window</p>
          <button onClick={()=> desktopWindow?.minimize()}>Minimize</button>
          <button onClick={()=> desktopWindow?.restore()}>Restore</button>
          <button onClick={()=> desktopWindow?.maximize()}>Maximize</button>
          <button onClick={()=> desktopWindow?.close()}>Close</button>
        </>
}

2. useDrag.ts

import React,{ useCallback } from "react";
import { useDrag, useWindow } from 'overwolf-hooks'

const Header:FC = ()=>{
const [desktopWindow] = useWindow("desktop");
const { onDragStart, onMouseMove, setCurrentWindowID } = useDrag(null);

const updateDragWindow = useCallback(() => {
  if (desktopWindow?.id) setCurrentWindowID(desktopWindow.id);
}, [desktopWindow]);

return <header onMouseDown={event => onDragStart(event)} onMouseMove={event => onMouseMove(event)}>
          Header Text
        </header>
}

3. useGameEventProvider.ts

import React,{ useEffect } from "react";
import { useGameEventProvider } from 'overwolf-hooks'

const Overlay:FC = ()=>{
const [{ event, info }, setGameFeatures] = useGameEventProvider<
    GameExample.Info,
    GameExample.Event
  >();

  useEffect(() => {
    console.info("event", event); // or use https://github.com/AlbericoD/overwolf-modern-react-boilerplate#-remote-redux-debug
  }, [event]);

  useEffect(() => {
    console.info("info", info); // or use https://github.com/AlbericoD/overwolf-modern-react-boilerplate#-remote-redux-debug
  }, [info]);

return <p>Overlay Window</p>

}

4. useRunningGame.ts

import React,{ useEffect } from "react";
import { useGameEventProvider } from 'overwolf-hooks'

const Alert:FC = ()=>{
  const [currentGame] = useRunningGame();

  useEffect(() => {
    console.info("currentGame", currentGame);
  }, [currentGame]);

return <p>Alert Window</p>

}

License

MIT © AlbericoD