DEV Community: Son Goku

How to Create a Gif to Video converter 😎 Vue + Wasm

Son Goku — Tue, 05 Jan 2021 19:06:28 +0000

You can view here what we are building
https://hunterjs-bit.github.io/vue_wasm_gif_to_video/

You can find the full source code for this tutorial in my repo:
https://github.com/HunterJS-bit/vue_wasm_gif_to_video

What you will build ?

You are going to build an simple application that provides GIF to Video conversion. User can preview converted video and download it. Normally for this user would have to write some server code for handling conversion but we can do it all on client side thanx to WASM :)

Prerequisites

You should know basic programming. This is fairly easy project that you can do for fun. We are using Vue & Wasm but you can use any other framework for this.

Lets get started

First things first, lets generate Vue project and install needed dependencies than we will talk a bit more about the code.

Initial Setup With Vue CLI

For your reference, please see the Vue CLI documentation. Follow these steps to install and initialize via Vue CLI:

Step 1: Install Vue CLI 3

```
 npm install -g @vue/cli
```

Step 2: Initialize your project with Vue CLI 3

```
   vue create vue-app
```

Step 4: Serve up a localhost

Once everything is installed, navigate to the project folder and run npm run serve in the terminal to serve up a localhost.

Open your browser, and you will get screen simmilar to this one.

Install dependencies

We will use ffmpeg.wasm library to allow us to convert gif to video. Ffmep library is a port of popular FFmpeg library and provides simple to use APIs for audio, video manipulation.

Run command follwing command, to install ffmpeg:

npm install @ffmpeg/ffmpeg @ffmpeg/core

File Structure Overview

The component tree itself is nothing groundbreaking, We will use only one component:

VideoMaker.vue - Renders the Vue video converter component

So create your new component VideoMaker.vue.

The basic structure of a Vue single file component includes your markup, script, and style tags.

<template>
  <div>

  </div>
</template>

<script>
export default {
 name: 'VideoMaker',
}
</script>

<style scoped>

</style>

Next we will add form, and component logic

Add Form, Load Fmmpeg Library and Style component

<template>
  <div class="gif-converter">
    <div class="upload-form">
      <h2>Upload your Gif</h2>
      <form >
        <div class="upload-box" :style="{ backgroundImage: 'url(' + gifImage + ')' }">
          <div class="upload-icon" v-if="!gifImage">

          </div>
          <input type="file" id="fileInput" name="filename" />
        </div>
      </form>
      <div class="action-bar mt-10">
        <button class="convert-btn">Convert to Video</button>
      </div>
    </div>
    <div class="preview-form">
      <h2>Result</h2>
      <div class="video-wrapper">
        <div class="loader" v-if="loading">
          <h2 class="loading-text">Loading ...</h2>
        </div>
        <video v-if="video" id="output-video" controls :src="video"></video>
      </div>
    </div>
  </div>
</template>

<script>
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";
// create ffmpeg instance
const ffmpeg = createFFmpeg({ log: true });

export default {
  name: "VideoMaker",
  async created() {
    // load ffmpeg when component is created
    await ffmpeg.load();
  },
  data() {
    return {
      gifImage: null, // gif image is loadaded
      video: null, // video converted
      loading: false // should show loading animation
    };
  },
};
</script>

<style scoped>
.gif-converter {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 20px 50px;
  background: white;
  box-shadow: 0 15px 20px -15px rgba(0, 0, 0, 0.3),
    0 55px 50px -35px rgba(0, 0, 0, 0.3), 0 85px 60px -25px rgba(0, 0, 0, 0.1);
}
.preview-form video {
  max-width: 100%;
  width: 100%;
  height: auto;
}
.loader {
  margin-top: 50px;
}
.loader .loading-text {
  font-weight: 100;
  color: #dedede;
}
#fileInput {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
</style>

I realize that’s a lot to drop on you, but I hope it’s clear enough that most developers would be able to follow it. Clearly there’s a lot of cruft in here. But will try to explain a bit.

First we Import fetchFile & createFFmpeg methods from ffmpeg/ffmpeg

const ffmpeg = createFFmpeg({ log: true });

here we create ffmpeg instance for later use

await ffmpeg.load();

here we have to wait to load ffmpeg in browser

As you can see towards in our template, we have 2 forms. First form is for uploading gif and second form is for rendering converted video in form.

And we have data properties gifImage, video, loading that are manily used for toggling visibility of component

And now add logic

 methods: {
    uploadFile(e) {
      const file = e.target.files[0];
      this.gifImage = URL.createObjectURL(file);
    },
    /**
     * Handles gif to video conversion
     */
    async convertToVideo() {
      this.video = null;
      ffmpeg.FS("writeFile", "randGif.gif", await fetchFile(this.gifImage)); // load gif image into ffmpeg
      this.loading = true;
      await ffmpeg.run("-f", "gif", "-i", "randGif.gif", "output.mp4");  // convert gif to mp4
      const data = ffmpeg.FS("readFile", "output.mp4");
      this.video = URL.createObjectURL(
        new Blob([data.buffer], { type: "video/mp4" })
      ); // create URL representing video field
      this.loading = false;
    }
  }

As you can see towards here we have two methods

uploadFile - method is used to get Gif image that user uploads
convertToVideo - method handles video conversion, here as you can see, first we load gif image into ffmpeg library, then we use ffmpeg.run command to do conversion, and at last we get URL of created video file

and here is updated template

<template>
  <div class="gif-converter">
    <div class="upload-form">
      <h2>Upload your Gif</h2>
      <form @submit.prevent="uploadFile">
        <div class="upload-box" :style="{ backgroundImage: 'url(' + gifImage + ')' }">
          <div class="upload-icon" v-if="!gifImage">
            <upload-icon></upload-icon>
          </div>
          <input type="file" id="fileInput" @change="uploadFile" name="filename" />
        </div>
      </form>
      <div class="action-bar mt-10">
        <button class="convert-btn" :disabled="!gifImage" @click="convertToVideo">Convert to Video</button>
      </div>
    </div>
    <div class="preview-form">
      <h2>Result</h2>
      <div class="video-wrapper">
        <div class="loader" v-if="loading">
          <h2 class="loading-text">Loading ...</h2>
          <loader-icon></loader-icon>
        </div>
        <video v-if="video" id="output-video" controls :src="video"></video>
      </div>
    </div>
  </div>
</template>

In template we just attached on click convertToVideo and uploadFile methods.

Closing thoughts

Now that you've built this project, you should have a firm understanding of how Vue.js is used with Wasm. For additional practice, try implementing more features and building on the existing structure.

With your newfound knowledge, you can add features such as:

add backward conversion (from video to gif)
add different formats when converting video
add animations

Full source code is available here. You are welcome to join in and feel free to contribute

Building Context Menu in Vue.js

Son Goku — Mon, 12 Oct 2020 23:09:47 +0000

Today we are going to create our context menu with VueJS from scratch, with traditional "Hello World" example.

Create fresh Vue Project

Let's start by creating new project and running the application.

The first you have to do is to install the Vue CLI on your computer

To create a new project, run:


 create <enter the app name>

More about Vue cli, you can see here from their official docs.

It will generate new Project with following initial file structure:

index.html
src/App.vue
src/main.js
src/assets/logo.png
src/components/HelloWorld.vue

Start Project

Now lets run our generated project by Vue CLI



cd <project-name>
npm install
npm run serve

The Vue Instance

We will open now App.vue there will be following code:



<div id="app">
  <img width="25%" src="./assets/logo.png">
  <HelloWorld/>
</div>

For now we can remove HelloWorld component and create new component named ContextMenu.vue

Open you ContextMenu.vue and add basic template



<div class="context-menu" ref="context" tabindex="0">
        <slot></slot>
    </div>

A bit about code
Slot will allow us to render components inside of our context menu, and tabIndex prop will focus element

Add Styles



<style>
.context-menu {
    position: fixed;
    background: white;
    z-index: 999;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}
</style>

Now add some logic and full component Code



<template>
<div class="context-menu" v-show="show" :style="style" ref="context" tabindex="0" @blur="close">
        <slot></slot>
    </div>
</template>
<script>
import Vue from 'vue';

export default {
    name: 'CmpContextMenu',
    props: {
        display: Boolean, // prop detect if we should show context menu
    },
    data() {
        return {
            left: 0, // left position
            top: 0, // top position
            show: false, // affect display of context menu
        };
    },
    computed: {
        // get position of context menu
        style() {
            return {
                top: this.top + 'px',
                left: this.left + 'px',
            };
        },
    },
    methods: { 
        // closes context menu 
        close() {
            this.show = false;
            this.left = 0;
            this.top = 0;
        },
        open(evt) {
            // updates position of context menu 
            this.left = evt.pageX || evt.clientX;
            this.top = evt.pageY || evt.clientY;
            // make element focused 
            // @ts-ignore
            Vue.nextTick(() => this.$el.focus());
            this.show = true;
        },
    },
};
</script>
<style>
.context-menu {
    position: fixed;
    background: white;
    z-index: 999;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}
</style>

The code is self self explanatory explained open method opens context menu, close method closes the context menu, and computed propert styles that will return position of context menu.

Usage

Now import your new component into App.vue, and start show your own context menu.



<div id="app">
  <img width="25%" src="./assets/logo.png">
 <context-menu :display="showContextMenu" ref="menu">
      <ul>
         <li> List item 1 </li>
         <li> List item 2 </li>
      </ul>
</context-menu>

<button @click='openContextMenu'>activate context menu</button>
</div>

<script>
import ContextMenu from './ContextMenu';


export default {
  components: {
    ContextMenu,
  },
  data() {
     return { showContextMenu: false }
  },
  methods: {
    openContextMenu(e) {
         this.$refs.menu.open(e);
    }
  }
}
</script>

With a little edit you could create something looking like this:

Note

This is just a basic and really simple example how you could create context menu with as little code as possible.

As is almost always the case, you'll need to pick the approach that makes the most sense for your use-case.

Did you relocate ? Tell me your rellocation experiences

Son Goku — Tue, 15 Sep 2020 23:55:57 +0000

I'm getting offers for relocation outside my country, I'm wondering if it's common for developers to relocate to country ? If yes what are your experiences ? I'm willing to move just about anywhere for a dev position, but I don't know how commonly this happens.How should I go about this? Should I watch out for some red flags and what are they ?

Build Multiselect component in few lines

Son Goku — Sat, 05 Sep 2020 01:44:52 +0000

Introduction

What We Will Be Building

In this example, i will show you how you can build sime React Multiselect component. You can see basic logic behind component, and how you can use to build something simmilar yourself.

What is multiselect

React Multiselect - is a component that allows users to tick multiple options. Its implementation is quite simple, and in exchange brings a lot of UX value.

Prerequisites

This tutorial assumes that you have working knowledge of React
We are going to Use React Hooks
For css library I used here TailwindCSS, but you can use other if you like
Before we get started, ensure that you have Node, Yarn, or npm installed in your environment.
Have a Web browser ofcourse

Creating the React App

Now that we have all the information we will need to connect our application and we know what are we building, let's start building out our application!

Open your teminal, once there, we are going to be using the create-react-app command to get our application running. Run the following command:

npx create-react-app multiselect

Now to explain a bit.

The npx command will install and run the command create-react-app for us. The last part of that command is the name of our app. We are going to be naming our app multiselect, feel free to name it whatever you want.

Once cli has finished creating the project folder you can cd into it, and run it:

cd multiselect
npm start

Open your brower in type into url -> localhost:3000 to see our default React start page.

It will look like this:

Install TailwindCSS

Next step is to install and configure tailwindcss. So I do not want to make this article too long, so you can check out these 2 guides on how to setup React with Tailwind:

React & Tailwind Setup
Configure React with Tailwind

Anyway If you do not want to use Tailwindcss, you can choose any other css framework (Bootstrap, Foundation etc), the code will work just fine.

Our Components

We will need 2 files, for this one to hold Multiselect component & one to hold Dropdown.

Within the /src folder, create a folder named /components. With that folder, create three files:

./Multiselect.js
./Dropdown.js

Multiselect Component

Now we will start working on MultiSelect component.
Open you Multiselect.js & paste following code inside it:

import React, { useState } from "react";

const MultiSelect = () => {
  const [items, setItems] = useState(["john", "milos", "steph", "kathreine"]);
  const [selectedItems, setSelected] = useState([]);

  return (
    <div className="autcomplete-wrapper">
      <div className="autcomplete">
        <div className="w-full flex flex-col items-center mx-auto">
          <div className="w-full">
            <div className="flex flex-col items-center relative">
              <div className="w-full ">
                <div className="my-2 p-1 flex border border-gray-200 bg-white rounded ">
                  <div className="flex flex-auto flex-wrap">
                    {selectedItems.map((tag, index) => {
                      return (
                        <div
                          key={index}
                          className="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700 bg-teal-100 border border-teal-300 "
                        >
                          <div className="text-xs font-normal leading-none max-w-full flex-initial">
                            {tag}
                          </div>
                          <div className="flex flex-auto flex-row-reverse">
                            <div>

                            </div>
                          </div>
                        </div>
                      );
                    })}
                    <div className="flex-1">
                      <input
                        placeholder=""
                        className="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800"
                      />
                    </div>
                  </div>
                  <div className="text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200">
                    <button className="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none">

                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MultiSelect;

Adding Dropdown

Let's build out our dropdown now. We need our dropdown to open options and allow users to add/remove tags.

Now will introduce new Component Dropdown.js, do not forget to create it if you didn't already, and there put view of our dropdown

Also we will Updated Multiselect component with showing/hidding dropdown on click.

Here are our now our two updated components:

Dropdown.js

import React from "react";  

const Dropdown = ({ list }) => {  
  return (  
    <div  
      id="dropdown"  
      className="absolute shadow top-100 bg-white z-40 w-full lef-0 rounded max-h-select overflow-y-auto "  
    >  
      <div className="flex flex-col w-full">  
        {list.map((item, key) => {  
          return (  
            <div  
              key={key}  
              className="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100"  
            >  
              <div className="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">  
                <div className="w-full items-center flex">  
                  <div className="mx-2 leading-6  ">{item}</div>  
                </div>  
              </div>  
            </div>  
          );  
        })}  
      </div>  
    </div>  
  );  
};  

export default Dropdown;

Multiselect.js

import React, { useState } from 'react';
// import dropdown component
import Dropdown from './Dropdown';


const Multiselect = () => {
    // state showing if dropdown is open or closed
    const [dropdown, setDropdown] = useState(false);
    // managing dropdown items (list of dropdown items)
    const [items, setItems] = useState(['john', 'milos', 'steph', 'kathreine']);
    // contains multiselect items
    const [selectedItems, setSelected] = useState([]);

    // toggle dropdown open/close  
    const toogleDropdown = () => {
        setDropdown(!dropdown)
    };

    return (<div className="autcomplete-wrapper">
        <div className="autcomplete">
        <div className="w-full flex flex-col items-center mx-auto">
    <div className="w-full">
        <div className="flex flex-col items-center relative">
            <div className="w-full ">
                <div className="my-2 p-1 flex border border-gray-200 bg-white rounded ">
                    <div className="flex flex-auto flex-wrap">
                        {
                            selectedItems.map((tag, index) => {
                                return (
                                    <div key={index} className="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700 bg-teal-100 border border-teal-300 ">
                                            <div className="text-xs font-normal leading-none max-w-full flex-initial">{ tag }</div>
                                            <div className="flex flex-auto flex-row-reverse">
                                                <div>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" 
                                                    className="feather feather-x cursor-pointer hover:text-teal-400 rounded-full w-4 h-4 ml-2">
                                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>)
                            })
                        }
                        <div className="flex-1">
                            <input placeholder="" className="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800"/>
                        </div>
                    </div>
                    <div className="text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200" onClick={toogleDropdown}>
                        <button className="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-up w-4 h-4">
                                <polyline points="18 15 12 9 6 15"></polyline>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
         { dropdown  ? <Dropdown list={items}></Dropdown>: null }
    </div>
</div>

    </div>
        </div>)
};

export default Multiselect;

Notice what we changed We've added dropdown component, look at the bottom of Multiselect component and added state for dropdown and toogleDropdown method to to switch between open and close state using: setDropdown(!dropdown).

Adding Option to Add/Remove Tags

Now this is the last step, we can add 2 methods to add & remove tags to and from multiselect.

This will give us options to add item to multiselect by clicking on it from dropdown list, and remove it from multiselect by click on X.

Check Updated Component:

Multiselect.js

import React, { useState } from 'react';
import Dropdown from './Dropdown';


const Multiselect = () => {
    // state showing if dropdown is open or closed
    const [dropdown, setDropdown] = useState(false);
    // managing dropdown items (list of dropdown items)
    const [items, setItems] = useState(['john', 'milos', 'steph', 'kathreine']);
    // contains selected items
    const [selectedItems, setSelected] = useState([]);


    const toogleDropdown = () => {
        setDropdown(!dropdown)
    };
    // adds new item to multiselect 
    const addTag = (item) => {
        setSelected(selectedItems.concat(item));
        setDropdown(false);
    };
    // removes item from multiselect
    const removeTag = (item) => {
        const filtered = selectedItems.filter((e) => e !== item);
        setSelected(filtered);
    }

    return (<div className="autcomplete-wrapper">
        <div className="autcomplete">
        <div className="w-full flex flex-col items-center mx-auto">
    <div className="w-full">
        <div className="flex flex-col items-center relative">
            <div className="w-full ">
                <div className="my-2 p-1 flex border border-gray-200 bg-white rounded ">
                    <div className="flex flex-auto flex-wrap">
                        {
                            selectedItems.map((tag, index) => {
                                return (
                                    <div key={index} className="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700 bg-teal-100 border border-teal-300 ">
                                            <div className="text-xs font-normal leading-none max-w-full flex-initial">{ tag }</div>
                                            <div className="flex flex-auto flex-row-reverse">
                                                <div onClick={() => removeTag(tag)}>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" 
                                                    className="feather feather-x cursor-pointer hover:text-teal-400 rounded-full w-4 h-4 ml-2">
                                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>)
                            })
                        }
                        <div className="flex-1">
                            <input placeholder="" className="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800"/>
                        </div>
                    </div>
                    <div className="text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200" onClick={toogleDropdown}>
                        <button className="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-chevron-up w-4 h-4">
                                <polyline points="18 15 12 9 6 15"></polyline>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
         { dropdown  ? <Dropdown list={items} addItem={addTag}></Dropdown>: null }
    </div>
</div>

    </div>
        </div>)
};

export default Multiselect;

Dropdown.js

import React from 'react';


const Dropdown = ({list, addItem}) => {


    return (<div id="dropdown" className="absolute shadow top-100 bg-white z-40 w-full lef-0 rounded max-h-select overflow-y-auto ">
    <div className="flex flex-col w-full">
        { list.map((item, key) => {
            return <div key={key} 
            className="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100" 
            onClick={() => addItem(item)}>
            <div className="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100" >
                <div className="w-full items-center flex">
        <   div className="mx-2 leading-6  ">
            { item }
           </div>
          </div>
         </div>
        </div>
        })}
    </div>
</div>);

};

export default Dropdown;

What have we changed, nothing much, we added 2 new methods: addTag, removeTag in Multiselect, they will allow use to like their names say remove them and add them to multiselect

Conclusion

While this is a very simple tutorial, it shows how far we can get with just few lines of react code (most of the code is css classes from tailwind).

So what does this all mean? What have you learned? You learned how to create a React multiselect component with all the basic functionality encapsulated within it. You also learned how to pass values to the component, and how to use useState hook.

Now don't just stare there go and try buiding something yourself, because that is the fastest way you will learn!

If you have any questions, please don’t hesitate to leave a comment below.

If you liked this post, you can find more on:

Following me on Twitter:

React infinite scroll in few lines

Son Goku — Sun, 09 Aug 2020 22:35:22 +0000

Introduction

What is infinite scroll ?

Infinite scrolling is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination.
Some sites where you can see usage of infinity scroll are for example: Twitter, 9gag etc...

What are we going to build

I know nothing to fancy looking, but you can improve and style it, so it looks better, this is just a basic example and introducting a concept

Prerequisites

This tutorial assumes that you have working knowledge of React
We are going to Use React Hooks
Before we get started, ensure that you have Node, Yarn, or npm installed in your environment.
Have a Web browser offcourse

Getting started

npx create-react-app infiniteScroll

Once you have finished creating the project folder you can cd into it, and run it:

cd infiniteScroll 
npm start

This will run the app in development mode and you can view it in the browser using the link http://localhost:3000/.

It will look like this:

Component Setup

Create new Infinite scroll component and paste following code inside it:

import React, { useState  } from 'react';
// styling post container
const divStyle = {
    color: 'blue',
    height: '250px',
    textAlign: 'center',
    padding: '5px 10px',
    background: '#eee',
    marginTop: '15px'
};

// styling container wrapper
const containerStyle = {
    maxWidth: '1280px',
    margin: '0 auto',
}

const InfiniteScroll = () => {
    // initialize list of posts
    const [postList, setPostList] = useState({
        list: [1,2,3,4]
    }); 


    return (<div className="container" style={containerStyle}>
        <div className="post-list">
            {
                postList.list.map((post, index) => {
                    return (<div key={index} 
                             className="post" 
                             style={divStyle}>
                        <h2> {post } </h2>
                    </div>)
                })
            }
            <div className="loading">
                    <h2>Load More</h2>
           </div>
        </div>
    </div>)
}

export default InfiniteScroll;

Your page will now look like this:

Adding infinite scroll

For this we would use Interaction Observer API
Intersection Observer is a really awesome JavaScript API that simplifies scroll-based events in JavaScript. Rather than constantly checking the distance from the top, Intersection Observer watches when an element enters or exits the viewport.

We will use interaction Observer to watch when user enters specific point and then load more posts.

First we will import **useRef* and useEffect hook from React and attach them to Load More div*
then will register IntersectionObserver on Load More div when component is mounted
add new state variable page, that will track on what page we currently are. To simulate more real life example how we would do it when connecting with backend
the last step when page is update, simply just load more posts

Here is a complete code:

import React, { useEffect, useState, useRef  } from 'react';

const divStyle = {
    color: 'blue',
    height: '250px',
    textAlign: 'center',
    padding: '5px 10px',
    background: '#eee',
    marginTop: '15px'
};


const containerStyle = {
    maxWidth: '1280px',
    margin: '0 auto',
}
const InfiniteScroll = () => {
    const [postList, setPostList] = useState({
        list: [1,2,3,4]
    }); 
    // tracking on which page we currently are
    const [page, setPage] = useState(1);
    // add loader refrence 
    const loader = useRef(null);

    useEffect(() => {
         var options = {
            root: null,
            rootMargin: "20px",
            threshold: 1.0
         };
        // initialize IntersectionObserver
        // and attaching to Load More div
         const observer = new IntersectionObserver(handleObserver, options);
         if (loader.current) {
            observer.observe(loader.current)
         }

    }, []);


    useEffect(() => {
        // here we simulate adding new posts to List
        const newList = postList.list.concat([1,1,1,1]);
        setPostList({
            list: newList
        })
    }, [page])

    // here we handle what happens when user scrolls to Load More div
   // in this case we just update page variable
    const handleObserver = (entities) => {
        const target = entities[0];
        if (target.isIntersecting) {   
            setPage((page) => page + 1)
        }
    }


    return (<div className="container" style={containerStyle}>
        <div className="post-list">
            {
                postList.list.map((post, index) => {
                    return (<div key={index} className="post" style={divStyle}>
                        <h2> {post } </h2>
                    </div>)
                })
            }
             <!-- Add Ref to Load More div -->
            <div className="loading" ref={loader}>
                    <h2>Load More</h2>
           </div>
        </div>
    </div>)
}

export default InfiniteScroll;

This is my first post on Dev.to Thank you for reading :)

If you liked this post, you can find more by:

Following me on Twitter: