React component for rendering a sliding window view of elements.
npm install peripheral-view --save
import PeripheralView from "peripheral-view";
<PeripheralView
ref={r => (this.view = r)}
length={1000}
radius={100}
renderMap={i => <div key={i}>{i}</div>}
handleChange={i => console.log(i)}
/>;
this.view.scrollTo(250);
type: number
The maximum number of elements. To create a view with an infinite number of elements, use Infinity
.
type: number
The number of elements to render adjacent to both sides of the current element. This value must be large enough such that when the current view is rendered, there exists elements rendered outside of the scrolling viewport.
type: number => React element
A mapping function from element index to React element. The React element returned must have the key prop and its value must be a nonnegative value (usually the value will be the parameter of renderMap). The value must be nonnegative because PeripheralView internally has components with negative keys.
type: number => void
A callback that is called when the index used as the "center" is changed.
type: number => void
Make the input index the current element. This brings the corresponding element to view by changing the scroll location of the nearest scrollable ancestor.