Naive Props Mutation

    dom-display-detector-react

    1.0.1 • Public • Published

    DOM Display Detector React

    React integration for DOM Display Detector.

    NPM

    npm install --save-dev dom-display-detector-react
    

    Yarn

    yarn add dom-display-detector-react --dev
    

    Installation

    import React from 'react';
    import DOMDisplayDetector from 'dom-display-detector-react';
    
    class Hood extends React.Component {
        render() {
            return <h1>Lorem Ipsum</h1>
        }
    }
    
    class App extends React.Component {
        seen(el) {
            // ..
        }
    
        render() {
            return(
                <div>
                    <DOMDisplayDetector seen={this.seen}>
                        <Hood />
                    </DOMDisplayDetector>
                </div>
            );
        }
    }
    

    Configuration

    Once

    If you want to run seen method for once, you can pass once property as true.

    	render() {
            return(
                <div>
                    <DOMDisplayDetector once={true}>
                        // ..
                    </DOMDisplayDetector>
                </div>
            );
        }
    

    Callbacks

    seen(el:HTMLElement): void
    Runs when the element starts to be seen on the screen.

    unseen(el:HTMLElement): void
    Runs when the element starts to be unseen on the screen.

    You can also define the callbacks in the child component instead of passing them as props.

    class Hood extends React.Component {
        seen(el) {
            // ...
        }
    
        unseen(el) {
            // ...
        } 
    
        render() {
            return <h1>Lorem Ipsum</h1>
        }
    }
    
    class App extends React.Component {
        render() {
            return(
                <div>
                    <DOMDisplayDetector>
                        <Hood />
                    </DOMDisplayDetector>
                </div>
            );
        }
    }
    

    IE Support

    IE 10 is not supported and patches to fix problems will not be accepted.

    License

    DOM Display Detector React is provided under the MIT License.

    Install

    npm i dom-display-detector-react

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    111 kB

    Total Files

    10

    Last publish

    Collaborators

    • cevadtokatli