Skip to content
This repository has been archived by the owner on Jan 12, 2023. It is now read-only.

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

Notifications You must be signed in to change notification settings

Thiti-Dev/react-onscreensensor

Repository files navigation

This project was created and implemented by Thiti Mahawannakit

🎓 React-OnScreenSensor

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

✨ Features

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

🚀 Getting Started

  1. Install the node modules.

Installing via yarn / npm , your preference

yarn add react-onscreensensor
  1. 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

Changelog

[1.0.7-stable] - Current Version

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

[1.0.6-stable] - Deprecated

  • Fixed the return boolean that always return false

[1.0.42-a] - Deprecated

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

[1.0.41] - Deprecated

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

[1.0.4] - Deprecated

  • Removed unused empty cycle

[1.0.3] - Deprecated

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

[1.0.1] - Deprecated ( old pkg name )

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

[1.0.0] - Deprecated ( old pkg name )

  • Initialized all needed files

: Contact me By :
Facebook | Instagram | LinkedIn

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published