https://github.com/kmkzt/react-hooks-visible

React Hooks library for element visibility. Uses the intersection observer API.
https://github.com/kmkzt/react-hooks-visible

Last synced: about 1 month ago
JSON representation

React Hooks library for element visibility. Uses the intersection observer API.

• Host: GitHub
• URL: https://github.com/kmkzt/react-hooks-visible
• Owner: kmkzt
• License: mit
• Created: 2019-05-27T14:40:55.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-13T11:41:12.000Z (8 months ago)
• Last Synced: 2024-04-13T21:28:33.974Z (8 months ago)
• Language: TypeScript
• Homepage: https://kmkzt.github.io/react-hooks-visible/
• Size: 1.1 MB
• Stars: 29
• Watchers: 2
• Forks: 0
• Open Issues: 32
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-hooks-visible`
• awesome-react-hooks-cn - `react-hooks-visible`
• awesome-react-hooks - `react-hooks-visible`
• awesome-react-hooks - `react-hooks-visible`

README

        
# react-hooks-visible

[![npm version](https://badge.fury.io/js/react-hooks-visible.svg)](https://badge.fury.io/js/react-hooks-visible.svg) ![npm](https://img.shields.io/npm/dt/react-hooks-visible.svg)

`react-hooks-visible` is React Hooks library for element visibility. Uses the intersection observer API.

**[demo](https://kmkzt.github.io/react-hooks-visible/)**

## Get started

```shell

yarn add react react-hooks-visible

```

## How to use

started

```javascript

import React from 'react'

import { useVisible } from 'react-hooks-visible'

const VisibleComponent = () => {

  const [targetRef, visible] = useVisible()

  return (

    
This is {Math.floor(visible * 100)} % visible 

  )

}

```


Pass a function to an argument, and you can change the return value

```javascript

// Percent value.

const [targetRef, percent] = useVisible((vi: number) => Math.floor(vi * 100))

// Boolean. This example is 50% visible.

const [targetRef, isVisible] = useVisible((vi: number) => vi > 0.5)

// CSSProperties. opacity

const [styleExampleRef, visibleStyle] = useVisible((vi: number) => ({

  opacity: vi

}))

```

### Options.

This is same as IntersectionObserver Option.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Creating_an_intersection_observer

```javascript

const [targetRef, visible] = useVisble(Math.floor(visible * 100),{

  root: document.querySelector('wrapper') // Wrap element

  rootMargin: '10px', //wrap element margin

  threshold: [0.1, 0.2, 0.3, 0.4]

})

```

[example code](src/example/)