react-onscreensensor

This project was created and implemented by Thiti Mahawannakit

A React Library which provides the ability whether to check if the wrapped elements are being shown or not , most likely benifit in the use of Triggering Animation

• [x] Allowed multiple children inside
• [x] Using reference over timestamp [ PATCHED ]
• [x] Callback optional [ PATCHED ]

1. Install the node modules.

Installing via yarn / npm , your preference

yarn add react-onscreensensor

2. Usage.

import React fron 'react';
import OnScreenSensor from 'react-onscreensensor'
const Example () => {
    return(
        <OnScreenSensor onChange={isVisible => console.log(`Visibility : ${isVisible}`)}>
            <div>Hello , Am i visible?</div>
        </OnScreenSensor>
    )
}

export default Example

• Binding function once in constructor
• Remove event listener when un-mounting the right way ( mistaken fixed )

• Fixed the return boolean that always return false

• Bundled files using webpack and all files are structured
• Updated Example of usage

• Removed console logging when the class is created
• Removed unused state

• Removed unused empty cycle

• Renamed from onscreensensor to react-onscreensensor (The prefix does make sense)

• Added a utils folder to contains separate function
• Fixed operators warning in functions
• Added README.md

• Initialized all needed files

: Contact me By :
Facebook | Instagram | LinkedIn