local-id-array

0.1.6 • Public • Published

This is a immutable array that maintain local id. It's helpful for optimizing list render.

Install

npm i -S local-id-array

Usage

import React from 'react';
import LocalIdArray from 'local-id-array';

class MyComponent extends React.PureComponent {
  
  render() {
    return (
      <ul>
        {this.props.list.map((item, id) => 
          <li key={id}>
            {item}
          </li>
        )}
      </ul>
    );
  }
}

class MyPage extends React.Component {
  state = {
    list: new LocalIdArray()
  };
  
  componentDidMount() {
    fetchData().then(json => this.setState((prevState) => ({ 
      list: prevState.list.concat(json.list)
    })));
  }
  
  render() {
    return (
      <div>
        <h1>MyPage</h1>
        <MyComponent list={this.state.list} />
      </div>
    );
  }
}

API

  • constructor
const array = new LocalIdArray();
const array1 = new LocalIdArray([1, '2', { i: 3 }]);
const array2 = new LocalIdArray(array1)l
  • push(...params : any) : LocalIdArray
const array = new LocalIdArray();
// immutable
// newArr [{ name: 'obj' }, 3, 5]
const newArr = array.push({ name: 'obj' }, 3, 5); 
  • concat(...params : any) : LocalIdArray
const array = new LocalIdArray();
// newArr [{ name: 'obj' }, 3, 5]
const newArr = array.concat([{ name: 'obj' }, 3], 5); 
  • unshift(...params : any) : LocalIdArray
const array = new LocalIdArray();
// newArr [{ name: 'obj' }, 3, 5]
const newArr = array.unshift({ name: 'obj' }, 3, 5); 
  • toArray() : Array
const array = new LocalIdArray([{ name: 'obj' }, 3, 5]);
console.log(array.toArray()); // [{ name: 'obj' }, 3, 5]
  • map(cb : func) : Array
const array = new LocalIdArray([{ name: 'obj' }, 3, 5]);
const result = array.map((item, id, index) => ({ item, id, index }));
// [{ item: { name: 'obj' }, id: 1, index: 0 }, { item: 3, id: 2, index: 1 }, { item: 5, id: 3, index: 2 }]
console.log(result);
  • slice(startIndex : number, endIndex : number) : LocalIdArray
const array = new LocalIdArray([{ name: 'obj' }, 3, 5]);
// newArr [3]
const newArr = array.slice(1, 2);
  • splice(start : number, deleteCount : number, ...items : any) : LocalIdArray
const array = new LocalIdArray([{ name: 'obj' }, 3, 5]);
// immutable
// newArr [{ name: 'obj' }, 'new Item1', 2, 5]
const newArr = array.splice(1, 1, 'new Item1', 2);
  • length : number
const array = new LocalIdArray([{ name: 'obj' }, 3, 5]);
console.log(array.length); // 3
  • at(index : number) : any
const array = new LocalIdArray([{ name: 'obj' }, 3, 5]);
console.log(array.at(1)); // 3
  • [NOT IMPELEMENT] access like array (read only) (This feature need Proxy polyfill.)
const array = new LocalIdArray([{ name: 'obj' }, 3, 5]);
console.log(array[1]); // 3
  • set(index : number, value : any) : LocalIdArray
const array = new LocalIdArray([{ name: 'obj' }, 3, 5]);
const newArr = array.set(0, 'string');
console.log(newArr.at(0)); // string
  • exchange(i1 : number, i2 : number) : LocalIdArray (exchange two item)
const array = new LocalIdArray([{ name: 'obj' }, 3, 5]);
const newArr = array.exchange(0, 1);
console.log(newArr.toArray()); // [3, { name: 'obj' }, 5]
  • every(callback : func) : bool (it will return false immediately when callback return false)
const array = new LocalIdArray([{ name: 'obj' }, 3, 5]);
const result = array.every((item, index) => typeof item === 'object');
console.log(result); // false
  • has(callback : func) : bool (it will return true immediately when callback return true)
const array = new LocalIdArray([{ name: 'obj' }, 3, 5]);
const result = array.has((item, index) => typeof item === 'object');
console.log(result); // true

Package Sidebar

Install

npm i local-id-array

Weekly Downloads

1

Version

0.1.6

License

MIT

Last publish

Collaborators

  • frezc