Normal Polygamous Marriage

    react-vlist

    0.2.1 • Public • Published

    react-virtual-list

    npm MIT License Travis codecov Codacy Badge

    This is a list component that support viartualize rendering. It can be easly customize by providing its own item renderer.

    • Super fast. 😛
    • Responsive Components!
    • Easy to use.
    • Easy to Customize with Item Renderers.
    • Support thousand of records.

    Demo

    Check out a working demo here

    Some Demo Code

    • Edit 5xnwjvjxwx Simple Demo.
    • Edit pj5jpm577 Demo with select Item,highlight selected and on click handler.

    Installation

    npm install react-vlist

    Configuration

    This is an example with a minimal use of the VirtualList component

    import React from "react";
    import ReactDOM from "react-dom";
    import VirtualList from "react-vlist";
    import "./Application.css";
     
    const data = [{ name: "hola" }];
    for (let i = 0; i < 1000; i++) {
      data.push({ name: `Row ${i}` });
    }
    function App() {
      return (
        <div className="app-container">
          <h1>Virtual List</h1>
          <VirtualList
            className="list"
            data={data}
            itemheight={50}
            renderItems={(item, index, style) => (
              <div className="itemRenderer" key={index} style={style}>
                <img
                  className="itemImage"
                  src="https://i.stack.imgur.com/4QkvN.jpg?s=64&g=1"
                />
                <div className="itemTitleContainer">
                  <div className="itemTitle">{item.name}</div>
                  <div className="itemContent">{item.name}</div>
                </div>
              </div>
            )}
          />
        </div>
      );
    }
     
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

    So the first thing is to create some data

    const data = [{ name: "hola" }];
    for (let i = 0; i < 1000; i++) {
      data.push({ name: `Row ${i}` });
    }

    The next thing we implement a render method that use the list.

     <VirtualList
            className="list"
            data={data}
            itemheight={50}
            renderItems={(item, index, style) => (
              <div className="itemRenderer" key={index} style={style}>
                <img
                  className="itemImage"
                  src="https://i.stack.imgur.com/4QkvN.jpg?s=64&g=1"
                />
                <div className="itemTitleContainer">
                  <div className="itemTitle">{item.name}</div>
                  <div className="itemContent">{item.name}</div>
                </div>
              </div>
            )}
          />

    The list recive 3 params:

    • data: Data is an array of elements to be render by the list
    • itemheight: is the height of each item of the list
    • renderItems: It is a hight order function where you can set what component is to be use to render the list elements.
      • The function recive the following params:
        • item:A element from the data object.
        • index:The cardinal order of the element, it positio in the data array.
        • style:The style to be applied to position the element.
      • This function returns:
        • A react component.(Make sure you assign the style to the returning component so it get position properly)

    Install

    npm i react-vlist

    DownloadsWeekly Downloads

    43

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    204 kB

    Total Files

    16

    Last publish

    Collaborators

    • gquiman