https://github.com/idimetrix/use-size-observer

A custom React hook that leverages the ResizeObserver API to track and measure the dimensions of an element.
https://github.com/idimetrix/use-size-observer

hook hoook observer react reactjs resize

Last synced: about 1 month ago
JSON representation

A custom React hook that leverages the ResizeObserver API to track and measure the dimensions of an element.

• Host: GitHub
• URL: https://github.com/idimetrix/use-size-observer
• Owner: idimetrix
• License: other
• Created: 2024-09-17T20:44:55.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-17T20:45:18.000Z (4 months ago)
• Last Synced: 2024-11-12T23:39:05.074Z (about 2 months ago)
• Topics: hook, hoook, observer, react, reactjs, resize
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/use-size-observer
• Size: 59.6 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-size-observer

A custom React hook that leverages the ResizeObserver API to track and measure the dimensions of an element.

## Installation

To install the package, use npm:

```bash

pnpm add use-size-observer

yarn install use-size-observer

npm install use-size-observer

```

## Usage

```typescript

import { useSizeObserver } from 'use-size-observer';

const [ref, size] = useSizeObserver();

console.log(size);

return 
...

```


## tsup

Bundle your TypeScript library with no config, powered by esbuild.

https://tsup.egoist.dev/

## How to use this

1. install dependencies

```

# pnpm

$ pnpm install

# yarn

$ yarn install

# npm

$ npm install

```

2. Add your code to `src`

3. Add export statement to `src/index.ts`Message

4. Test build command to build `src`.

Once the command works properly, you will see `dist` folder.

```zsh

# pnpm

$ pnpm run build

# yarn

$ yarn run build

# npm

$ npm run build

```

5. Publish your package

```zsh

$ npm publish

```

## test package

https://www.npmjs.com/package/use-size-observer