react-visualize-list v1.0.2

react-visualize-list

Example

function Example() {
  const [scrollToIndex, setscrollToIndex] = useState(0);

  return (
    <div className="App">
      <h1>Visualize List</h1>
      <div>
        Scroll to ::
        <input
          onKeyDown={(e) => {
            if (e.key === 'Enter') setscrollToIndex(Number(e.target.value));
          }}
        />
      </div>
      <h1 />
      <VisualizedList
        itemCount={1000}
        itemSize={30}
        headerHeight={30}
        style={{ maxHeight: 500, maxWidth: 600 }}
        renderItem={(index) => <div style={{ width: 800 }}>{index}</div>}
        renderHeader={() => (
          <div
            style={{
              background: 'grey',
              height: '100%',
              fontWeight: 'bold',
              minWidth: 1000,
            }}
          >
            Header
          </div>
        )}
        scrollToIndex={scrollToIndex}
      />
    </div>
  );
}