useElementOverflow

Category

Elements

Export Size

765 B

Last Changed

5 days ago

Reactive element's overflow state

Demo

Usage

import { useElementOverflow } from '@reause/core'
import { useRef } from 'react'

const el = useRef<HTMLDivElement | null>(null)
const { isXOverflowed } = useElementOverflow(el, { observeMutation: true })

// <div ref={el} style={{ width: 100, overflow: 'hidden' }}>
//   {isXOverflowed ? <button>show more</button> : <span>some words may be too long to show here</span>}
// </div>

Type Declarations

export interface UseElementOverflowOptions extends ConfigurableWindow {
    observeMutation?: boolean | MutationObserverInit;
    onUpdated?: ResizeObserverCallback | MutationCallback;
}

export interface UseElementOverflowReturn {
    isXOverflowed: boolean;
    isYOverflowed: boolean;
    stop: () => void;
    update: () => void;
}

export function useElementOverflow(target: RefObject<Element | null | undefined>, option?: UseElementOverflowOptions): UseElementOverflowReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

0fe6e - fix(core): resolve useElementOverflow audit findings (#550)

30916 - fix(test): stabilize flaky timing-sensitive browser tests

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)