The only component exposed to external is MovieList. And use install script like below:
npm install --save @sevenryze/movie-scroll<MovieList
ref={this.movieListInstanceRef}
data={this.state.data}
assumedHeight={400}
bufferHeightRatio={0}
>
{(item: any, index: number) => <Showcase item={item} index={index} />}
</MovieList><MovieList
ref={this.movieListInstanceRef}
data={this.state.data}
assumedHeight={400}
bufferHeightRatio={0}
useWrapperDivAsScreen={{
className: "list"
}}
>
{(item: any, index: number) => <Showcase item={item} index={index} />}
</MovieList>
/*
.list {
margin: 5rem auto;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
height: calc(100vh - 300px);
}
*/This lib exposes only one public class: MovieList.
<MovieList
ref={this.movieListInstanceRef}
data={this.state.data}
assumedHeight={400}
bufferHeightRatio={0.5}
useWrapperDivAsScreen={{
className: "list"
}}
>
ref.storeMovie();
ref.restoreMovie();data: any[]: The list data. Must contain an ID field.assumedHeight: number: The height used when the items are not actually rendered.bufferHeightRatio: number: How many buffer we want to use?useWrapperDivAsScreen: Whether use wrapper div as local scroller, and if use, please supply a css className.ref.storeMovie: () => void: Call to get the internal movie object. Used For cache and restore.ref.restoreMovie: (movie) => void: Send the cached movie object to internal. Make sure to keep sync between movie object and your data object.
Build? you shall use this one and forget other hand-tired works.
Seven Ryze
|