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
;;; Component { return <div> <ReactScrollToShowCb onScrollToShow=thishandleShow onInitEnd=thishandleInitEnd 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> } { console; console; } { console; } ReactDOM;
run the example
npm install --savenpm run dev
The demo app is running at http://localhost:8080.
API
<ReactScrollToShowCb onScrollToShow= {} onInitEnd= {} 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: true
When set to false, every time the dom showed, the callback will be triggered.
autoInit
default: true
When set to false, you can init ReactScrollToShowCb's instance whenever you want by using ReactScrollToShowCb.Update.
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 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.