Coder Social home page Coder Social logo

sdtm1016 / react-scroll-to-show-cb Goto Github PK

View Code? Open in Web Editor NEW

This project forked from coypan/react-scroll-to-show-cb

0.0 2.0 0.0 18 KB

A react component that fires a callback when the wrapped dom scroll into the visible area.

HTML 9.65% JavaScript 90.35%

react-scroll-to-show-cb's Introduction

react-scroll-to-show-cb

React component that fires a callback when the wrapped dom scroll into the visible area

install

npm install react-scroll-to-show-cb --save

usage

support:

  • Before React v16.0
  • After React v16.0
  • preact (preact-compat) - need to set alias: react -> preact-compat , react-dom -> preact-compat
import React from 'react';
import ReactDOM from 'react-dom';
import ReactScrollToShowCb from'react-scroll-to-show-cb';

class App extends React.Component {
    
    render() {
        return <div>
            <ReactScrollToShowCb 
            onScrollToShow={this.handleShow}
            onInitEnd={this.handleInitEnd}
            once={true} 
            wait={500}>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
            </ReactScrollToShowCb>
        </div>
    }

    handleShow(index, dom) {
        console.log(`index: ${index}`);
        console.log('dom:', dom);
    }

    handleInitEnd(instance){
        console.log(instance);
    }

}


ReactDOM.render(<App />, document.body);

run the example

npm install --save
npm run dev

The demo app is running at http://localhost:8080.

API

<ReactScrollToShowCb
    onScrollToShow={(index, dom) => {}} 
    onInitEnd={(instance) => {}}
    once={Boolean} 
    async={Boolean}
    wait={Number}> 
    {children}     
</ReactScrollToShowCb>

onScrollToShow

required

When the wrapped children are scrolled into visible view, this callback function will be triggered with two parameters : the index of the child and the dom of the child.

onInitEnd

When ReactScrollToShowCb is initialized, this function will be triggered with a parameter : the instance of ReactScrollToShowCb.

async

default:false

When set to true, you can set the children async and the onScrollToShow will be also triggered.

once

default: false

When set to true, every time the dom showed, the callback will be triggered.

wait

default: 500

The throttle wait time for the callback.

children

required

  • HTML elements, such as div, p, section , are supported.

  • Class react component is supported.

  • Functional react component is not supported.

  • If given an Array, every element of the array should be the same type(the same html element or the same react component);

Static Method

Update

When you change the children, adding a child or removing a child, the ReactScrollToShowCb will not work anymore unless you call the Update method. Usage:

import ReactScrollToShowCb from'react-scroll-to-show-cb';

...
// � ins: the instance of the ReactScrollToShowCb. You can get it the instance by [onInitEnd]
ReactScrollToShowCb.Update(ins);
...

Notice that you should call the Update method in the callback of setState. You can find the complete example in the test/index.js.

Note

Do not replace children of react-scroll-to-show-cb. Adding or removing a child is allowed. You can consider using more than one react-scroll-to-show-cb instance if you have children with different child types.

react-scroll-to-show-cb's People

Contributors

coypan avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.