https://github.com/alexfigliolia/galena-window

A window size observer for Galena apps
https://github.com/alexfigliolia/galena-window

galena observer react window-size

Last synced: about 2 months ago
JSON representation

A window size observer for Galena apps

• Host: GitHub
• URL: https://github.com/alexfigliolia/galena-window
• Owner: alexfigliolia
• Created: 2024-08-02T21:12:46.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-08-12T14:31:59.000Z (5 months ago)
• Last Synced: 2024-10-12T21:51:35.771Z (3 months ago)
• Topics: galena, observer, react, window-size
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@figliolia/galena-window
• Size: 85 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Galena Window 

A window size observer for [Galena](https://www.npmjs.com/package/@figliolia/galena) Apps

## Installation

```

npm i @figliolia/galena @figliolia/galena-window

# or

yarn add @figliolia/galena @figliolia/galena-window

```

## Basic Usage

```typescript

// WindowSize.ts

import { WindowManager } from "@figliolia/galena-window";

export const WindowSize = new WindowManager();

// Begin listening for changes to the window size

WindowSize.initialize();

// Listen for changes

WindowSize.subscribe(({ width, height }) => {

  // Your logic

})

// Clean up and remove listeners

WindowSize.destroy();

```

## Integrating With React Apps

### Installation

```bash

npm i @figliolia/react-galena

# or

yarn add @figliolia/react-galena

```

### Basc Usage

The when calling `new WindowManager()`, a `State` instance is returned. You can generate `useState` hooks using:

```typescript

// WindowSize.ts

import { WindowManager } from "@figliolia/galena-window";

import { createUseState } from "@figliolia/react-galena";

export const WindowSize = new WindowManager();

export const useWindowSize = createUseState(WindowSize);

```

You can also initialize and destroy your `WindowManager` instance in your root component:

```tsx

// App.tsx

import { memo } from "react";

import { useSetup } from "@figliolia/galena-window";

import { WindowSize, useWindowSize } from "./WindowState";

export const App = memo(function App() {

  // Initialize!

  useSetup(WindowSize);

  // Get the current window size

  const [width, height] = useWindowSize(({ width, height }) => [

    width, 

    height

  ]);

  return (

    

      
The Current Width: {width}

      
The Current Height: {height}

    

  );

})

```