Lazy Load List Component For Vue

Install & Download:

# Yarn
$ yarn add lazy-load-list
# NPM
$ npm i lazy-load-list

Description:

A lightweight and performant lazy load list library for Vue, Svete.js, and React.js.

How to use it (Vue):

1. Import and register the Lazy Load List Component.

import LazyList from 'lazy-load-list/vue';

export default {
  components: {
    LazyList,
    // ...
  },
  // ...
}

2. Add a lazy load list component to your app.

<LazyList
  :data="colors"
  :itemsPerRender="15"
  containerClasses="list"
  defaultLoadingColor="#222"
>
  <template v-slot="{item}">
    <div @click="copyColor(item.hex)" class="item" :style="`background-color: ${item.hex}`">
      <div class="copy">{{ item.hex }}</div>
    </div>
  </template>
</LazyList>

export default {
  components: {
    LazyList,
  },
  data(){
    return {
      // 100 items of fruits
      colors,
      copied:''
    }
  },
  methods:{
    copyColor(color){
      window.navigator.clipboard.writeText(color)
      this.showCopiedText(color)
    },
    showCopiedText(color){
      this.copied = color
      setTimeout(() => {
        this.copied = ''
      }, 800);
    }
  }
}

3. All available component props.

data:{
  type: Array,
  default: () => [],
},
itemsPerRender:{
  type: Number,
  default: 3,
},
height:{
  type: Number,
  default: 480,
},
containerClasses:{
  type: String,
  default: '',
},
defaultLoading:{
  type: Boolean,
  default: true,
},
defaultLoadingColor:{
  type: String,
  default: '#18191A',
},