React debounce resize

Debounce element resize by showing pending state. Try interactive Storybook demo.

Installation

npm install react-debounce-resize

How to use

import { SwipeAction } from 'react-debounce-resize'
import 'react-debounce-resize/dist/index.css'

const App = () => {
	return (
		<DebounceResize fallback="Redrawing…">
			Your content here. E.g. a chart which is computationally intensive when
			resized.
		</DebounceResize>
	)
}

Props

| Prop | Type | Default | Description | | ------------------------------------- | ----------- | ------- | --------------------------------------------------------- | | fallback | ReactNode | | Fallback content shown while resizing is happening. | | debounceMilliseconds | number | 300 | How long to wait before assuming resize has ended. | | debounceIfReducedMotionPreferredToo | boolean | false | Apply debounce even if user agent prefers reduced motion. | | unmountContentWhileResizing | boolean | false | Remove main from DOM while resizing. | | disableCrossFade | boolean | false | Disable fade in and out of main and fallback content. |

Other exported helpers

• useMedia: Can be used to detect media query changes.
• usePrefersReducedMotion: Can be used to detect if user prefers reduced motion.
• useDebounceResize: Handles the logic of <DebounceResize> without visual effects.