React-page-fitter NPM

react-page-fitter

This is a React hooks that observe HTML element fits within the current viewport or element.
It's the for building more complex UI.

Installation

npm install react-page-fitter

Usage

import useFitter from 'react-page-fitter'

function MyComponent() {
  const pathname = // useLocation...
  const isFit = useFitter('.class')

  return isFit && <CustomComponents/>
}

API

useFitter (argument, options)
return value boolean | undefined.

Returns undefined if an invalid argument is passed.

Argument

Parameter	Meaning
target (required)	The judgement target element by tag, className or id

Options(object)

Field	Key
offsetX	Horizontal viewport offsetX number when not using parentBox, The default value is 0
offsetY	Vertical viewport offsetY number when not using parentBox, The default value is 0
parentBox	The judgement parentBox element by tag, className or id is judged in place of the viewport, default undefined
pathname	The dynamic pathname to render when placing at layout level