Skip to content

Commit

Permalink
perf(hooks): change hook options and improve hook logic
Browse files Browse the repository at this point in the history
BREAKING CHANGE: The { displayLog?: boolean } option has been removed.
The parameter is passed in a variable instead of the object
useWindow hook fixed when there is no valid window name.
useGameEventProvider hook is changed to improve performance.
  • Loading branch information
AlbericoD committed Jan 9, 2024
1 parent e51ea65 commit 91a9e18
Showing 1 changed file with 44 additions and 34 deletions.
78 changes: 44 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,12 @@ Custom hooks to help use overwolf api with the new react hooks technology.

```bash
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](https://overwolf.github.io/)
Expand All @@ -23,13 +27,14 @@ npm install --save overwolf-hooks
1. **useWindow.tsx**
```TSX
import { useWindow } from 'overwolf-hooks'
import { useWindow } from 'overwolf-hooks';
const options = { displayLog: true }
const shouldDisplayLog = true;
const shouldListenToWindowStateChanges = true;
const Panel = () => {
const [desktopWindow] = useWindow("desktop", options);
const [desktopWindow] = useWindow("desktop", shouldDisplayLog,shouldListenToWindowStateChanges);
return (
<div>
Expand All @@ -41,46 +46,51 @@ return (
</div>
)
}
```
## Force Window update
If you need to force update the window state, you can use the refreshState function.

```TSX
```tsx
import { useWindow } from 'overwolf-hooks'
const options = { displayLog: true, listenToWindowStateChanges: true }
const shouldDisplayLog = true;
const shouldListenToWindowStateChanges = true;
const Panel = () => {
//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", options);
const [desktopWindow, desktopWindowStateChanged, refreshState] = useWindow("desktop", shouldDisplayLog, shouldListenToWindowStateChanges);
useEffect(() => {
//........ any other code
//force update
//force update/rebind the window object
refreshState();
}, [refreshState]);
useEffect(() => {
//........ any other code
console.info("desktopWindowStateChanged", desktopWindowStateChanged);
}, [desktopWindowStateChanged]);
return <CustomComponent {...desktopWindow}/>
}
```
```
2. **useDrag.tsx**
```TSX
import { useEffect, useCallback } from "react";
import { useDrag, useWindow } from 'overwolf-hooks'
const options = { displayLog: true }
const shouldDisplayLog = true;
const Header = () => {
const [desktopWindow] = useWindow("desktop", options);
const { onDragStart, onMouseMove, setCurrentWindowID } = useDrag(null, options);
const [desktopWindow] = useWindow("desktop", shouldDisplayLog);
const { onDragStart, onMouseMove, setCurrentWindowID } = useDrag(null, shouldDisplayLog);
const updateDragWindow = useCallback(() => {
if (desktopWindow?.id) setCurrentWindowID(desktopWindow.id);
Expand All @@ -101,27 +111,25 @@ return (
3. **useGameEventProvider.tsx**
```TSX
import { useEffect } from "react";
import { useGameEventProvider } from 'overwolf-hooks'

const options = { displayLog: true }

const Overlay = () => {

const [{ event, info }, setGameFeatures] = useGameEventProvider<
GameExample.Info, //change with your GAME INTERFACE <OPTIONAL>
GameExample.Event //change with your GAME INTERFACE <OPTIONAL>
>(options);
const REQUIRED_FEATURES = ["game_info", "match_info", "game_events"];
const RETRY_TIMES = 5;
const DISPLAY_OVERWOLF_HOOKS_LOGS = true;
const BackgroundWindow = () => {
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(() => {
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>
start();
return () => stop();
}, [start, stop]);
}
```
Expand All @@ -132,11 +140,11 @@ return <p>Overlay Window</p>
import { useEffect } from "react";
import { useGameEventProvider, useRunningGame } from 'overwolf-hooks'
const options = { displayLog: true }
const shouldDisplayLog = true;
const Alert = () => {
const [currentGame] = useRunningGame(options);
const [currentGame] = useRunningGame(shouldDisplayLog);
useEffect(() => {
console.info("currentGame", currentGame);
Expand All @@ -150,3 +158,5 @@ return <p>Alert Window</p>
## License
MIT © [AlbericoD](https://github.com/AlbericoD)
````

0 comments on commit 91a9e18

Please sign in to comment.