@react-vertex/dom-hooks
v1.11.0
Published
React hooks for DOM operations
Downloads
9
Readme
@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>
)
}