@react-vertex/dom-hooks v1.11.0

@react-vertex/dom-hooks

Documentation and Examples

React hooks for DOM operations.

Install via npm:

npm install @react-vertex/dom-hooks

Importing:

import {
  useMeasure,
  useViewportSize,
} from '@react-vertex/dom-hooks'

useMeasure(ref) => bounds

React hook to get measurements of a DOM element.

Arguments:

ref: A React ref for the element you want to measure.

Returns:

bounds: An object e.g { left: 0, top: 0, width: 100, height: 100 }

Example Usage:

import React, { useRef } from 'react'
import { Canvas } from '@react-vertex/core'
import { useMeasure } from '@react-vertex/dom-hooks'

function Example() {
  const container = useRef()
  const { width, height } = useMeasure(container)
    
  return (
    <div ref={container}>
      <Canvas
        width={width}
        height={height}
      >
        ...
      </Canvas>
    </div>
  )
}

useViewportSize() => size

React hook to use window.innerWidth and window.innerHeight of the browser window viewport. This hook will update if the window is resized.

Arguments:

• None.

Returns:

size: An object e.g. { width: 200, height: 100 }

Example Usage:

import React from 'react'
import { Canvas } from '@react-vertex/core'
import { useViewportSize } from '@react-vertex/dom-hooks'

function Example() {
  const { width, height } = useViewportSize()
    
  return (
    <Canvas
      width={width}
      height={height}
    >
      ...
    </Canvas>
  )
}