https://github.com/prmichaelsen/react-ux-hooks

Hooks to measure DOM rects during resize, track viewport size, & disable iOS auto-input zoom.
https://github.com/prmichaelsen/react-ux-hooks

Last synced: 5 days ago
JSON representation

Hooks to measure DOM rects during resize, track viewport size, & disable iOS auto-input zoom.

• Host: GitHub
• URL: https://github.com/prmichaelsen/react-ux-hooks
• Owner: prmichaelsen
• Created: 2023-09-19T11:57:35.000Z (over 1 year ago)
• Default Branch: mainline
• Last Pushed: 2023-09-19T12:02:49.000Z (over 1 year ago)
• Last Synced: 2025-01-03T22:33:37.664Z (5 days ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@prmichaelsen/react-ux-hooks
• Size: 37.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## react-ux-hooks

Hooks to measure DOM rects during resize, track viewport size, & disable iOS Safari auto-input zoom.

### API & Examples

Track component size on resize:

```tsx

// declaration

declare function useDimensions(deps: any[], trackWindowResize?: boolean): {

    ref: null;

    dimensions: null;

} | {

    ref: (node: any) => void;

    dimensions: DOMRect;

};

// usage

export const Component = () => {

  const { ref, dimensions } = useDimensions([], true);

  return (

    


      Component Width: {dimensions.width}px

    

  );

}

```


Track viewport size:

```tsx

// declaration

export declare function useViewportSize(): {

    width: number;

    height: number;

};

// usage

export const Component = () => {

  const { width } = useViewportSize();

  return (

    


      Viewport Width: {width}px

    

  );

}

```


Disable auto-input zoom:

```tsx

// declaration

declare const useDisableAutoInputZoom: (disable: boolean) => void;

// usage

export const Component = () => {

  useDisableAutoInputZoom(false);

  return (

    

  );

}

```

## FAQ

### Why package these hooks together?

Why not?