https://github.com/antoniocapelo/react-page-visibility-render-props

Simple react wrapper for the pagevisibility.js package render props for better composability.
https://github.com/antoniocapelo/react-page-visibility-render-props

page-visibility pagevisibilityapi react render-props

Last synced: 30 days ago
JSON representation

Simple react wrapper for the pagevisibility.js package render props for better composability.

• Host: GitHub
• URL: https://github.com/antoniocapelo/react-page-visibility-render-props
• Owner: antoniocapelo
• Created: 2018-02-14T23:58:26.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-06-29T11:02:05.000Z (almost 8 years ago)
• Last Synced: 2025-12-29T00:58:11.727Z (6 months ago)
• Topics: page-visibility, pagevisibilityapi, react, render-props
• Language: JavaScript
• Homepage:
• Size: 363 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

          
# react-page-visibility-render-props

Simple react wrapper for the [pagevisibility.js package](https://github.com/ai/visibilityjs), using [render props](https://reactjs.org/docs/render-props.html) for better composability.

[![NPM](https://img.shields.io/npm/v/react-page-visibility-render-props.svg)](https://www.npmjs.com/package/react-page-visibility-render-props) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

> TODO: Complete the readme.

## Install

```bash

npm install --save react-page-visibility-render-props

```

## Usage

Just pass a function as a child of the `` component. This function should have a single parameter, which can be `visible | hidden | prerender` (check [here](https://github.com/ai/visibilityjs#states) for full description). 

```jsx

import React, { Component } from 'react'

import PageVisibility from 'react-page-visibility-render-props'

class Example extends Component {

  render () {

    return (

        

            {(pageVisibilityState) => {

                return (

                    
Page is { pageVisibilityState } so will act accordingly

                )

            }}

        

    )

  }

}

```


## License

MIT © [António Capelo](https://github.com/antoniocapelo)