https://github.com/fkrasnowski/usevisibilitypercentage

A react hook to measure visibility of element on screen
https://github.com/fkrasnowski/usevisibilitypercentage

frontend hook javascript percentage react react-hooks scroll visibility

Last synced: 17 days ago
JSON representation

A react hook to measure visibility of element on screen

• Host: GitHub
• URL: https://github.com/fkrasnowski/usevisibilitypercentage
• Owner: fkrasnowski
• License: mit
• Created: 2020-05-29T21:37:31.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T07:26:50.000Z (almost 2 years ago)
• Last Synced: 2024-05-19T18:33:58.294Z (8 months ago)
• Topics: frontend, hook, javascript, percentage, react, react-hooks, scroll, visibility
• Language: TypeScript
• Homepage:
• Size: 1.71 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# useVisibilityPercentage

[![GitHub license](https://img.shields.io/github/license/fkrasnowski/useVisibilityPercentage)](https://github.com/fkrasnowski/useVisibilityPercentage/blob/master/LICENSE)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

A react hook to measure percentage of element inside the window height (window.innerHeight).



## Features

- TypeScript support 🧔

- Lightweight 🐔

## Installation

```sh

npm i use-visibilty-perctange --save

```

Or

```sh

yarn add use-visibility-percentage

```

## Usage

```jsx

const [percent, position] = useVisibiltyPercentage(ref, \ * { options } * \)

```

| Property | Type      | Description                                                   |

| -------- | --------- | ------------------------------------------------------------- |

| ref      | react ref | Ref to element you want to monitor                            |

| percent  | number    | Number between 0 and 1 indicating visible fragment of element |

| position | string    | One of values _('above', 'top','center', 'bottom', 'below' )_ |

Basic usage:

```jsx

import React from 'react'

import useVisibiltyPercentage from 'use-visibilty-percentage'

const Percent = () => {

  const ref = useRef()

  const [percent] = useVisibiltyPercentage(ref)

  return (

    


  )

}

```


Using optional options:

```jsx

import React from 'react'

import useVisibiltyPercentage from 'use-visibilty-percentage'

const Percent = () => {

  const ref = useRef()

  const [percent] = useVisibiltyPercentage(ref, {

    offsetTop: 20,

    offsetBottom: 20,

    throttle: 30,

  })

  return (

    


  )

}

```


### Options

Provide these as second argument to hook _( useVisibiltyPerctange(ref, { **options** }) )_.

| Name             | Type   | Default | Required | Description                      |

| ---------------- | ------ | :-----: | :------: | -------------------------------- |

| **offsetTop**    | number |    0    |  false   | The top offset of window view    |

| **offsetBottom** | number |    0    |  false   | The bottom offset of window view |

| **throttle**     | number |   16    |  false   | The throttle time in miliseconds |