DEV Community: Nazif Barassounon

How to Implement Infinite Scrolling with React, React Query, and an Intersection Observer

Nazif Barassounon — Mon, 14 Nov 2022 08:00:00 +0000

An infinite scroll is a process by which a list of elements grows longer as a user approaches the bottom of that list by giving the illusion of an endless feed of content. In this article, I'll show you how to implement infinite scrolling using React, React Query, and an intersection observer through a Pokémon list app.

The complete code of this tutorial is located here

Setup

Let's start by creating a new React app:

npx create-react-app infinite-scrolling-react

The dependencies

Then we need to install the necessary dependencies for our app:

npm i -D tailwindcss postcss autoprefixer
npm i @tanstack/react-query axios

We will use Tailwindcss for the styling, React Query for handling the data fetching, and Axios for making the HTTP requests.

Tailwind configuration

For Tailwindcss to work, we need to initiate and configure it.
Let's execute the following command:

npx tailwindcss init -p

It will create the Tailwindcss configuration file, tailwind.config.js.
Let's modify it to match the following:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Then we add the Tailwind directives in the ./src/index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: #9f9e9e;
}

React Query configuration

All of the React Query operations will operate through a query client. Let's create one client instance and provide it to our app in the ./src/index.js file.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import the client provider and the client class
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

import App from './App';

const queryClient = new QueryClient(); // our client instance

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    // make the client available
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

The PokéAPI

Our list of pokémons will come from pokéAPI. It's a public API with a massive collection of data about Pokémon. For this example, we're interested in the list of pokémon names we can fetch with a GET request at https://pokeapi.co/api/v2/pokemon.

The UI structure

Let's implement the basic structure for our app with some styling. It will consist of a heading and an unordered list of names. So, we update the ./src/App.js file with the following:

export default function App() {
  return (
    <main className="grid gap-10 max-w-xl mx-auto px-2 md:px-10 text-slate-900">
      <h1 className="text-3xl text-center font-bold">Pokemons List</h1>

      <ul className="gap-6 grid grid-cols-1 ">
        {['Pikachu', 'bulbasaur', 'charmander'].map((name, resultIdx) => (
          <li
            className="bg-slate-900 w-full flex items-center justify-center h-40 rounded-lg border-solid border-2 border-violet-400 text-violet-400"
            key={name}
          >
            {name}
          </li>
        ))}
      </ul>
    </main>
  );
}

And we get this:

Data fetching

For now, we're iterating through hardcoded data. What we want is data from the PokéAPI. So let's create a helper function that will make the request.

// src/App.js
import axios from 'axios';

const fetchNames = async () =>
  await axios.get('https://pokeapi.co/api/v2/pokemon?limit=5');

//...

The fetchNames is an asynchronous function that fetches the first five pokémon names. To help us handle this request, we'll use the useQuery hook from react-query.

// src/App.js
//...
import { useQuery } from '@tanstack/react-query';
//...

export default function App() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ['names'],
    queryFn: fetchNames,
  });

  console.log(data);

  if (isLoading) {
    return <span>loading...</span>;
  }

  if (isError) {
    return <span>Something went wrong...</span>;
  }
  //...
}

We pass as an option the query key and the query function. React Query uses the query key to identify a query and cache the resulting data. The query function is where we will make an HTTP request by calling fetchNames. useQuery returns the request result and some booleans about the query's state. When we console.log the data, we get the following data structure:

{
  "data": {
    "count": 1154,
    "next": "https://pokeapi.co/api/v2/pokemon?offset=5&limit=5",
    "previous": null,
    "results": [
      {
        "name": "bulbasaur",
        "url": "https://pokeapi.co/api/v2/pokemon/1/"
      },
      {
        "name": "ivysaur",
        "url": "https://pokeapi.co/api/v2/pokemon/2/"
      }
      // three others below
    ]
  },
  "status": 200
  //...
}

Axios stored the PokéAPI response data under the data key. We are interested in the next and the results keys. results contains the first five names we requested, and next holds the endpoint we need to hit to get the subsequent five names. Now let's update the code to iterate through the API results:

//...
{
  data.data.results.map((pokemon, resultIdx) => (
    <li className="..." key={pokemon.name}>
      {pokemon.name}
    </li>
  ));
}
//...

Pagination

We can consider our unordered list of five names as one page, but we want our names list to be collections of pages stacked vertically. React Query has a useInfiniteQuery hook to help us with that. Let's replace useQuery with it:

//...
import { useInfiniteQuery } from '@tanstack/react-query';
//...
const fetchNames = async ({
  pageParam = 'https://pokeapi.co/api/v2/pokemon?limit=5',
}) => await axios.get(pageParam);
//...
export default function App() {
  const { data, isLoading, isError, hasNextPage, fetchNextPage } =
    useInfiniteQuery({
      //...
      queryFn: fetchNames,
      getNextPageParam: (lastPage, pages) => lastPage.data.next,
    });

  console.log(data);
  //...
   return (
      //...
      {data.pages.map((page, pageIdx) => (
        <ul key={`page-${pageIdx}`} className="...">
          {page.data.results.map((pokemon, resultIdx) => (
            <li
              key={pokemon.name}
              className="..."
            >
              {pokemon.name}
            </li>
          ))}
        </ul>
      ))}

      //...
  );

useInfiniteQuery required some other changes. Let's go through them. We had to get the pageParam from the query context enabling us to fetch the following pages. pageParam gets its value from the getNextPageParam function that we pass to useInfiniteQuery.

const { data, isLoading, isError, hasNextPage, fetchNextPage } =
  useInfiniteQuery({
    queryKey: ['names'],
    queryFn: fetchNames,
    getNextPageParam: (lastPage, pages) => lastPage.data.next,
  });

The return value of getNextPagePage also determines the boolean value of hasNextPage. Here, there are no more pages when lastPage.data.next is undefined, making hasNextPage false. The updated query function working with getNextPageParam will allow us to invoke fetchNextPage to get the subsequent pages when needed. Now data is structured based on a series of pages:

{
  "pages": [
    {
      "data": {
        "count": 1154,
        "next": "https://pokeapi.co/api/v2/pokemon?offset=5&limit=5",
        "previous": null,
        "results": [
          {
            "name": "bulbasaur",
            "url": "https://pokeapi.co/api/v2/pokemon/1/"
          }
        ]
      }
    }
  ],
  "pageParams": [null]
}

So we need to iterate through each page before iterating through the names:

{
  data.pages.map((page, pageIdx) => (
    <ul key={`page-${pageIdx}`} className="...">
      {page.data.results.map((pokemon, resultIdx) => (
        <li key={pokemon.name} className="...">
          {pokemon.name}
        </li>
      ))}
    </ul>
  ));
}

The infinite scrolling

The final thing we need is to invoke the fetchNextPage function at the right time when the user scrolls and reaches the bottom of the list. And that is where the intersection observer comes into play. It allows us to observe an intersection between two elements. Our plan here is to fetch the next page when the second last li element, representing the second last name in the list, intersects with the bottom of the viewport. Now let's define two refs: one for the observer and one for our second last list item.

export default function App() {
  //...
  const intObserver = useRef(null);
  const secondLastLIRef = useCallback(
    (li) => {
      if (isLoading) return;

      if (intObserver.current) intObserver.current.disconnect();

      intObserver.current = new IntersectionObserver((li) => {
        if (li[0].isIntersecting && hasNextPage) {
          fetchNextPage();
        }
      });

      if (li) intObserver.current.observe(li);
    },
    [isLoading, fetchNextPage, hasNextPage]
  );
  //...
}

In the secondLastLIRef, we created a new intersection observer instance that calls fetchNextPage only when a given element intersection with the bottom of the viewport and a new page is available:

intObserver.current = new IntersectionObserver((li) => {
  if (li[0].isIntersecting && hasNextPage) {
    fetchNextPage();
  }
});

We saved the instance as a ref because after it calls fetchNextPage, the component re-renders. We need to preserve this instance so we can disconnect it to the previous second to last list item name and observe the current relevant new list item:

if (intObserver.current) intObserver.current.disconnect();
//...
if (li) intObserver.current.observe(li);

Let's bid secondLastLIRef to the second to last list item by keeping in mind that we also need to target the endmost page.

<li
  className="..."
    key={pokemon.name}
    ref={
      data.pages.length - 1 === pageIdx &&
      page.data.results.length - 2 === resultIdx
        ? secondLastLIRef
        : null
    }
>

And voilà! Our infinite scrolling feature is up and running. Scroll until the bottom and see our list of pokémon names grow larger and larger.

A Quick Introduction to JavaScript Prototypal Inheritance

Nazif Barassounon — Thu, 04 Aug 2022 12:55:00 +0000

The prototypal inheritance is how, in JavaScript, we share reusable properties and methods throughout objects. In this article, we'll see how it works.

Say we represented a user with the following object:

let user = {
  name: 'John Snow',

  getName() {
    return this.name;
  },
};

We want an admin user with the same shape and feature with an additional isAdmin property set to true. Here's how prototypal inheritance helps us achieve this without repeating ourselves:

let user = {
  // ...
};

let admin = Object.create(user);
admin.isAdmin = true; // "isAdmin" is a new property set only in `admin`
admin.name = 'Daenerys Targaryen'; // "name" is an inherited property that is overwritten

console.log(admin.getName()); // Daenerys Targaryen ("getName" is also inherited from `user`)

By calling Object.create(user) we've made user the prototype of admin. It means that we have access to all the properties and methods of user through admin.

The Prototype Chain

When we call user.getName() and admin.geName(), two different things happen:

We find getName directly in user, but not in admin.
For admin, we implicitly go one step further in its prototype (user) to find the elusive getName.

By going one step further to reach a prototype, we're walking through the prototype chain. This chain can expand if we introduce a root user, for example:

let user = {
  //...
};

let admin = Object.create(user);
//...

let root = Object.create(admin);
root.isRoot = true;
root.name = 'Night King';

console.log(root.getName()); // Night King (inherited from `user`)
console.log(root.isAdmin); // true (inherited from `admin`)
console.log(root.isRoot); // true (proper to `root`)

Here, when we lookup root.getName, we walk through the prototype chain until the user prototype.

The ES6 class

An ES6 class and its instances also use a prototype behind the scene. When we define a constructor, it stores all of its properties and methods in the prototype property. Let's define a User class and some instances to see that in action:

class User {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

const user1 = new User('Joe');
const user2 = new User('Kim');

console.log(User.prototype === user1.__proto__); // true
console.log(user1.__proto__ === user2.__proto__); // true

As you can see, the constructor and the instances all share the same prototype. We access the prototype using prototype in the constructor and __proto__ in the instances.

Wrap up

Sharing properties and methods between objects is important because it allows us to make our code reusable and well-organized. We achieve this in JavaScript through a concept called prototypal inheritance. A prototype is an object referenced by other objects seeking the same properties and methods. A prototype can also have a prototype which in turn has a prototype, and so on, forming the prototype chain. We walk through this chain when a property or method is not found directly in a given object.

How to use Memoization in JavaScript

Nazif Barassounon — Sun, 03 Jul 2022 13:33:58 +0000

Memoization is a code optimization technique that saves a processing result in memory so that we skip the computation and return the same result given the same input later.

To illustrate that, let's say we have an expensive function called render. The render function takes some properties as an argument and renders a 2D model based on the properties we passed.

Due to the costly nature of the render function, we don't want to do the same calculation again with the same input. So at each render, we store the input and the output in memory as key-value pairs.

It allows us a quick lookup the next time we come across the same input saving us computing time.

Memoization in JavaScript

Now let's see how we could implement memoization in javaScript. Here we have a simple function that adds two to the number we pass and return the result:

function addTwo(num) {
  return num + 2;
}

What we want to do is to create a memoized version of that function. To achieve that, let's define the memoize function that takes as a parameter the function we want to memoize and returns a new function:

function memoize(fn) {
  const memo = {};
  return (...args) => {
    const argsStr = JSON.stringify(args);

    if (memo[argsStr]) {
      const result = memo[argsStr];
      return result;
    }

    const result = fn(...args);
    memo[argsStr] = result;
    return result;
  };
}

We defined the memo variable as a closure to map the inputs to their respective outputs. The new function we return next contained all the memoization logic. If we already came across a given argument, we return the corresponding result from memo:

function memoize(fn) {
  //...
  return (...args) => {
    if (memo[argsStr]) {
      return memo[argsStr];
    }
    //...
  };
}

Otherwise, we proceed to the computation and save the result in memo:

function memoize(fn) {
  //...
  return (...args) => {
    //...
    const result = fn(...args);
    memo[argsStr] = result;
    return result;
  };
}

Now, we're all set to create the memoized version of the addTwo function:

const memoizedAddTwo = memoize(addTwo);

console.log(memoizedAddTwo(2)); //==> 4
console.log(memoizedAddTwo(2)); //==> 4 known input. It uses memo!
console.log(memoizedAddTwo(5)); //==> 7 new value

When to use memoization

In the real world, it's overkill to use memoization for functions like addTwo. Instead, we use it when a process is time-consuming.

The issue with memoization

Memoization saves us time for the price of memory space. Used too frequently, the memory space we use to map each input and output grows proportionally. We can reduce that impact by deleting a mapping each time we return the result from a known input to free up some space.

//...
if (memo[argsStr]) {
  const result = memo[argsStr]
  delete memo[argsStr]
  return result;
}
//...

Wrap up

Memoization allows us to keep track of the different results of an expensive function so that, on known inputs, we don't have to repeat the calculation. However, this technique trades time for memory space, so we must use it carefully.

Learn about Closures in JavaScript

Nazif Barassounon — Sat, 28 May 2022 22:06:52 +0000

There is a pattern in JavaScript that we use all the time without noticing it: Closure!

A closure occurs when you use an outer variable in an inner block. Here is a simple example:

let count = 0

function increment() {
  count++ // closure here!
  return count
}

increment()

console.log(count) //==> 1

Closures can come in handy when you want to save a function's state.

Say that you're building a video game, and you have a function that applies teleportation to a given object in a 2D context:

function teleport(object, x, y) {
  object.x = x
  object.y = y
}

You want to be able to teleport objects in your game. But the possible amount of teleportation can vary. What you can do is create a function that returns a new function limiting the amount of time we call the teleport function:

function teleportNTime(n) {
  let count = 0

  return function(object, x, y) {
    if (count === n) {
      console.log("can't teleport anymore!")
      return
    }

    teleport(object, x, y)
    count++
    console.log("count: ", count)
  }
}

const teleport2Time = teleportNTime(2)
const teleport3Time = teleportNTime(3)

Two variables represent the state of teleport2Time:

the argument we passed teleportNTime; which is n = 2.
the count variable

Here the state is saved because each time we teleport, we remember the count and the teleportation limit (n = 2).

const goku = { name: 'goku', x: 0, y: 0 }

teleport2Time(goku, 2, 4) //=> count: 1
teleport2Time(goku, 8, 10) //=> count: 2
teleport2Time(goku, 0, 0) //=> can't teleport anymore!

Notice that the state of teleport3Time is independent of teleport2Time.

teleport3Time(goku, 2, 4) //=> count: 1

How to Make a Slideshow Gallery with ReactJS and Styled-Components

Nazif Barassounon — Sat, 04 Dec 2021 10:19:57 +0000

A slideshow gallery is part of the visual display modes you find on the web. It helps users navigate between images by boldly showing one picture at a time, leaving the other ones available on the side.

This blog post shows you how you can build a full-viewport slideshow gallery.

PREREQUISITES

Basic knowledge of JavaScript, React and styled-components

The complete code is in this repo.

Layout of a slideshow gallery

What will be the structure of our slideshow? I got us covered with the following wireframe:

The Slide Wrapper

From our wireframe, we see that a container wraps all the elements. So first, let's create a SlideWrapper styled component:

// src/slideshow-gallery/index.js
import styled from 'styled-components';

const View = () => <Slideshow />;

const Slideshow = () => {
  return <SlideWrapper></SlideWrapper>;
};

const SlideWrapper = styled.div`
  position: relative;
  width: 100vw;
  height: 100vh;
`;

export default View;

The SlideWrapper occupies the entire viewport's width and height. We wanted a full-viewport slideshow, right? And note that the children will position themselves relative to this wrapper, hence the position: relative;.

The Image Box

Each selected image will be in a box that preserves the image ratio (width/height). So let's create a wrapper around an <img> tag called ImageBox. This wrapper will put the image into a constraint. That is, the image must stay within the delimitation of the wrapper. That way, our slideshow will remain stable no matter the image size and orientation.

In the following, we define and use the ImageBox component:

// src/slideshow-gallery/index.js
// ...
const ImageBox = styled.div`
  position: relative;
  background-color: #343434;
  width: 100%;
  height: 85%;

  img {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
  }
`;

const Slideshow = () => {
  return (
    <SlideWrapper>
      <ImageBox>
        <img alt="" src="/pathToAnImage" />
      </ImageBox>
    </SlideWrapper>
  );
};
//...

Here is the result with different image orientations and sizes:

Our ImageBox needs a left and right button to help us switch between images. So let's create a NavButton styled component to accomplish that:

// src/slideshow-gallery/index.js
import styled, { css } from 'styled-components';

import rurikoTempleImage from './assets/ruriko-in-temple.jpeg';
import { ReactComponent as ChevronLeft } from './assets/chevron-left.svg';
import { ReactComponent as ChevronRight } from './assets/chevron-right.svg';

// ...

const Slideshow = () => {
  return (
    // ...
    <ImageBox>
      <img alt="" src={rurikoTempleImage} />
      <NavButton position="left">
        <ChevronLeft />
      </NavButton>
      <NavButton position="right">
        <ChevronRight />
      </NavButton>
    </ImageBox>
    // ...
  );
};

const NavButton = styled.button`
  cursor: pointer;
  position: absolute;
  top: 45%;
  padding: 5px;
  border-radius: 3px;
  border: none;
  background: rgba(255, 255, 255, 0.7);

  ${({ position }) =>
    position === 'left' &&
    css`
      left: 10px;
    `}

  ${({ position }) =>
    position === 'right' &&
    css`
      right: 10px;
    `}
`;

// ...

The NavButton is vertically centered in the ImageBox (top: 45%; ). Based on the position prop, the NavButton is either positioned to the left or the right.

It would also be nice to have a caption at the bottom:

// src/slideshow-gallery/index.js
const Slideshow = () => {
  return (
    <SlideWrapper>
      <ImageBox>
        // ...
        <ImageCaption>Ruriko Temple</ImageCaption>
      </ImageBox>
    </SlideWrapper>
  );
};

// ...

const ImageCaption = styled.span`
  width: 100%;
  text-align: center;
  font-weight: bold;
  position: absolute;
  bottom: 0;
  padding: 8px;
  background: rgba(255, 255, 255, 0.7);
`;

// ...

And we get the following:

Getting the Slideshow Items as prop

The slideshow needs to get a set of images from the outside. The src/slideshow-gallery/data.js file export an array of pictures that we can use. Each item gives access to the image source as well as the image caption:

// src/slideshow-gallery/data.js
import rurikoTemple from './assets/ruriko-in-temple.jpeg';
import itsukushimaShrine from './assets/itsukushima-shrine.jpeg';
// ...
const slideItems = [
  {
    image: nemichiJinja,
    caption: 'Nemichi-Jinja, Seki',
  },
  {
    image: itsukushimaShrine,
    caption: 'Itsukushima Shrine',
  },
  // ...
];

export default slideItems;

Let's import this array and pass it down to the Slideshow component:

// src/slideshow-gallery/index.js
// ...
import data from './data';

const View = () => <Slideshow items={data} />;
// ...

As our Slideshow component will render differently based on the selected image, we need to use a state. This state will hold all of the slide items in addition to the index of the currently active item:

// src/slideshow-gallery/index.js
import { useState } from 'react';
// ...
const Slideshow = (props) => {
  const [{ items, activeIndex }, setState] = useState({
    items: props.items,
    activeIndex: 0, // begin with the first item
  });

  return (
    <SlideWrapper>
      <ImageBox>
        <img alt={items[activeIndex].caption} src={items[activeIndex].image} />
        <NavButton position="left">
          <ChevronLeft />
        </NavButton>
        <NavButton position="right">
          <ChevronRight />
        </NavButton>
        <ImageCaption>{items[activeIndex].caption}</ImageCaption>
      </ImageBox>
    </SlideWrapper>
  );
};
// ...

Navigating between Images

With the state in place, we can add a click handler function to each NavButton to change the image:

// src/slideshow-gallery/index.js
// ...
const Slideshow = (props) => {
  // ...
  const moveTo = (newIndex) => () => {

    if (newIndex === -1) {
      // jump from the first image to the last
      setState((s) => ({ ...s, activeIndex: items.length - 1 }));
      return;
    }
    if (newIndex === items.length) {
      // jump from the last image to the first
      setState((s) => ({ ...s, activeIndex: 0 }));
      return;
    }

    setState((s) => ({ ...s, activeIndex: newIndex }));
  };

  return (
    <SlideWraper>
        // ...
        <NavButton position="left" onClick={moveTo(activeIndex - 1)}>
        // ...
        <NavButton position="right" onClick={moveTo(activeIndex + 1)}>
        // ...
    </SlideWraper>
  );
};
// ...

Thumbnail Images

After the ImageBox, we want a list of thumbnails for all of our images. That list will show the active image thumbnail with 100% opacity. And the inactive ones will be 40% transparent.

// src/slideshow-gallery/index.js
// ...
const Slideshow = (props) => {
  // ...
  return (
    <SlideWraper>
      // ...
      </ImageBox>
      <ThumbnailList>
        {items.map((item, index) => (
          <Thumbnail active={activeIndex === index} src={item.image} />
        ))}
      </ThumbnailList>
    </SlideWraper>
  );
};

const ThumbnailList = styled.div`
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 15%;
`;
const Thumbnail = styled.div`
  cursor: pointer;
  opacity: ${({ active }) => (active ? 1 : 0.6)};
  background-image: url(${({ src }) => src});
  background-size: cover;
  background-position: center;
  flex-grow: 1;

  :hover {
    opacity: 1;
  }
`;
// ...

Finally, we want to jump directly to an image by clicking on its thumbnail. To do that, we reuse our moveTo function:

// src/slideshow-gallery/index.js
// ...
{
  items.map((item, index) => (
    <Thumbnail
      onClick={moveTo(index)}
      // ...
    />
  ));
}
// ...

And now, the slideshow gallery is ready! Take a look at the final result:

Conclusion

From a wireframe, we broke down the distinct parts of the slideshow. It was the cornerstone we built upon until the final UI.

You can pat yourself on the back for making it to the end.

Thanks for reading!

Autocomplete through ReactJS Custom Hook

Nazif Barassounon — Sat, 23 Oct 2021 09:10:36 +0000

Autocomplete is a software feature that makes some suggestions based on what the user is currently typing. This functionality is widely used, from search engines to online shops.

This article shows how to use ReactJS custom Hook to enable simple autocomplete on a country search input.

UI structure

We have an input that aims to help users search for a country name. As the user types, we want to show some suggestions.

The following shows the code's structure and styling of the search form:

// src/autocomplete/index.js

import styled from 'styled-components';
import { ReactComponent as SearchIcon } from './search-icon.svg';
import countries from './countries';

const SearchForm = () => {

  const handleSubmit = (e) => {
    e.preventDefault();
  };

  return (
    <div>
      <Form 
        autoComplete="off" // disable the browser built-in autocomplete
        onSubmit={handleSubmit}
       >
        <Container>
          <Input/>
          <SubmitButton>
            <SearchIcon />
          </SubmitButton>
        </Container>
      </Form>
    </div>
  );
};

const Container = styled.div`
  position: relative;
`;

const List = styled.div`
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 40vh;
  background-color: #293241;
  border-radius: 0 0 5px 5px;
  overflow-y: scroll;
`;

const Item = styled.div`
  border-left: 3px solid ${({ active }) => (active ? 'blue' : 'initial')};
  background-color: ${({ active }) => (active ? 'gray' : 'initial')};
  padding: 0 15px;
  color: ${({ active }) => (active ? 'white' : '#f2e9e4')};
  cursor: pointer;

  &:hover {
    background-color: gray;
  }
`;

const Input = styled.input`
  background-color: #293241;
  color: #f2e9e4;
  border: none;
  width: 400px;
  padding: 15px 15px;
  border-radius: 5px 0 0 0;

  &:focus {
    outline: none;
  }
`;

const Match = styled.strong`
  color: #c9ada7;
`;

const Form = styled.form`
  width: 100vw;
  height: 100vh;
  background-color: #4a4e69;
  padding-top: 10%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
`;

const SubmitButton = styled.button`
  outline: none;
  background-color: #293241;
  padding: 15px 20px;
  border: none;
  color: #f2e9e4;
  border-radius: 0 5px 0 0;

  &:focus {
    outline: none;
  }
`;

export default SearchForm;

The useAutocomplete Hook

useAutocomplete is the custom Hook that will be responsible for the autocomplete logic. First, we handle the search input value change:

// src/autocomplete/useAutocomplete.js

import { useState } from 'react';

const INITIAL_STATE = {
  value: '',
};

const useAutocomplete = (initialState = INITIAL_STATE) => {
  const [{ value }, setState] = useState(initialState);

  const handleValueChange = (newValue) => {
    setState((s) => ({
      ...s,
      value: newValue,
    }));
  };

  return {
    value,
    handleValueChange,
  };
};

export default useAutocomplete;

Now let's use it in the search input:

// src/autocomplete/index.js

//...
import useAutocomplete from './useAutocomplete';

const SearchForm = () => {
  const { value, handleValueChange } = useAutocomplete();
 //...
  return (
    <div>
          //...
          <Input
            value={value}
            onChange={(e) => handleValueChange(e.target.value)}
          />
         //...
    </div>
  );
};

Secondly, we filter the country's names. We get the list of countries as an argument for the handleValueChange function. The result of the filtering, that is, the suggestions, is stored in the Hook's state:

// src/autocomplete/useAutocomplete.js

// ...
const INITIAL_STATE = {
  // ...
  suggestions: [], // contains autocomplete suggestions
};

const useAutocomplete = (initialState = INITIAL_STATE) => {
  const [{ value }, setState] = useState(initialState);

  const handleValueChange = (newValue, items) => {
    setState((s) => ({
      ...s,
      value: newValue,
      suggestions: items
        .filter((item) => {
          /*
            if the letters typed by the user match the beginning
            of the item we keep it
          */
          const match = item.substr(0, newValue.length);
          return match && match.toLowerCase() === newValue.toLowerCase();
        })
        .slice(0, 13), // limits the suggestion to 13 items
    }));
  };

  return {
    // ...
    suggestions, // exports the suggestions
  };
};
// ...

While the user types, we want to style the matching part differently from the rest of each suggestion. To achieve that, we change the suggestion items data structure as follow:

// src/autocomplete/useAutocomplete.js

// ...
  const handleValueChange = (newValue, items) => {
    setState((s) => ({
      // ...
      suggestions: items
        .filter((item) => {
          // ...
        })
        .map((item) => ({ rest: item.substr(newValue.length), itemValue: item }))
        .slice(0, 13),
        // ...

The caller of handleValueChange might want to provide a custom filtering function. Let's extract the current filtering logic in a separate function and accept a custom filtering function as an option:

// src/autocomplete/useAutocomplete.js

// ...

const defaultFilter = (inputValue, items) =>
  items
    .filter((item) => {
      const match = item.substr(0, inputValue.length);
      return match && match.toLowerCase() === inputValue.toLowerCase();
    })
    .map((item) => ({
      rest: item.substr(inputValue.length),
      itemValue: item,
    }))
    .slice(0, 13);

const useAutocomplete = () => {
  // ...

  const handleValueChange = (newValue, items, { customFilter } = {}) => {
    // uses customFilter if defined
    const filter = customFilter ?? defaultFilter;

    setState((s) => ({
      // ...
      suggestions: filter(newValue, items),
    }));
  };
//...

Now, we can show the suggestions to the user:

// src/autocomplete/index.js

// ...
const SearchForm = () => {
  const { value, handleValueChange, suggestions } = useAutocomplete()
  const hasSuggestions = !(Array.isArray(suggestions) && !suggestions.length);

  // ...
          <Input
            value={value}
            onChange={(e) => handleValueChange(e.target.value, data)}
          />
          <SubmitButton>
            <SearchIcon />
          </SubmitButton>
          {hasSuggestions && (
            <List>
              {suggestions.map(({ rest, itemValue }, i) => (
                <Item key={itemValue}>
                  <Match>{value}</Match>
                  {rest}
                </Item>
              ))}
            </List>
          )}
// ...

The next thing we want is to select one of the suggestions when we click on it. Let's create a select function in the useAutocomplete Hook:

// src/autocomplete/useAutocomplete.js

// ...
const useAutocomplete = (initialState = INITIAL_STATE) => {
  // ...
  const select = (value) => setState({ ...INITIAL_STATE, value });

  return {
    // ...
    select,
  };
};
// ...

The following manage the click event on each suggestion item:

// src/autocomplete/index.js

// ...
const SearchForm = () => {
  // imports the select function
  const { ..., select } = useAutocomplete();
  // ...
           {suggestions.map(({ rest, itemValue }, i) => (
             <Item key={itemValue} onClick={() => select(itemValue)}>
// ...

An autocomplete input usually allows us to move through the suggestion items using the up and down arrow keys. Also, we can select an active suggestion by pressing the "enter" key. We'll add all these features to our search input.

As we move between suggestions, we need to keep track of the current active suggestion in the Hook's state:

// src/autocomplete/useAutocomplete.js

const INITIAL_STATE = {
 // ...
  currentFocus: null,
};

Initially, currentFocus is set to null. It means there is no focus at all. As the user starts to type, we want the currentFocus to be -1. In this case, the focus is on the input itself.

Why do we need to consider the text input as a focus-able element? To understand, let's consider a specific case. Say a user starts to type and notices that the suggestion at the very bottom matches what the user is looking for. When the user presses the up arrow key, we want the focus to jump straight to the last suggestion.

Apart from null and -1, currentFocus hold the index of the active suggestion.

With that in mind, the following update the handleValueChange function:

// src/autocomplete/useAutocomplete.js

// ...
const useAutocomplete = (initialState = INITIAL_STATE) => {
// ...
  const handleValueChange = (newValue, items) => {
    setState((s) => ({
      ...s,
      currentFocus: -1, // the focus is on the search input at the beginning
      value: newValue,
      // ...

Then, we handle three types of keys down events:

ArrowUp
ArrowDown
Enter

// src/autocomplete/useAutocomplete.js

// ...
const useAutocomplete = (initialState = INITIAL_STATE) => {
  const [{ value, suggestions, currentFocus }, setState] = useState(initialState);
  // ...
  const handleKeyDown = ({ key }) => {
    switch (key) {
      case 'ArrowDown':
        setState((s) => ({
          ...s,
          currentFocus:
            s.currentFocus === s.suggestions.length - 1
              ? 0
              : s.currentFocus + 1,
        }));
        break;
      case 'ArrowUp':
        setState((s) => ({
          ...s,
          currentFocus:
            s.currentFocus === 0 || s.currentFocus === -1
              ? s.suggestions.length - 1
              : s.currentFocus - 1,
        }));
        break;
      case 'Enter':
        if (currentFocus !== null && currentFocus !== -1) {
          select(suggestions[currentFocus].itemValue);
        }
        break;
      default:
        break;
    }
  };

  return {
   // ...
   handleKeyDown,
   currentFocus,
  };
};
// ...

For the ArrowDown event we check if the active suggestion is at the very bottom: s.currentFocus === s.result.length - 1. If this is the case, we jump to the very top suggestion of index 0 otherwise we move to the next suggestion (s.currentFocus + 1).

With the ArrowUp event, the process is similar but the other way around. If the current focus is on the first suggestion (s.currentFocus === 0) or the input itself (s.currentFocus === -1) we want to move at the very bottom (s.suggestions.length - 1). If not, we go to the previous suggestion (s.currentFocus - 1).

Next, we handle the Enter event by selecting the current active suggestion's value (select(suggestions[currentFocus].itemValue)).

The following attach the key down handler to our search input:

// src/autocomplete/index.js

<Input
  onKeyDown={handleKeyDown}
  // ...
/>

Based on the active prop of the styled component, Item, the active suggestion appears differently:

// src/autocomplete/index.js

//...
{result.map(({ match, rest, value }, i) => (
  <Item
    active={i === currentFocus}
    // ...
  >
// ...

Our simple autocomplete input is now completed.

The complete code can be found in this repo

Conclusion

The useAutocomplete Hook abstracted the autocomplete logic. It took control over the changing input value then created some suggestions. The suggestions have been generated using either a default filtering function or a custom one. Also, useAutocomplete took care of some key-down events.

As a result, we have a clean SearchForm component and gained in code reusability.

Thanks for reading!

React compound components in action

Nazif Barassounon — Fri, 23 Apr 2021 08:35:30 +0000

Welcome to my first ever written article. It will be about showing you the usage of compound components through an example of a Modal Box. I used a CSS-in-JS library called Emotion for styling. For the sake of conciseness, the styling codes will be omitted. The goal is to see what compound components bring to the table. The code is available on my Github repository.

Something familiar

Take a glance at this code snippet:

<select>
  <option value="value1">option a</option>
  <option value="value2">option b</option>
  <option value="value3">option c</option>
  <option value="value4">option d</option>
</select>

When an <option> is clicked, <select> somehow knows about it. This is because a state is implicitly shared between <select> and <option>. Their awareness of this state allows them, when put together, to do a specific task. I find that we get a nice API out of it. Compound components give the ability to do the same with the help of React Context.

Context provides a way of sharing values down to the component tree implicitly. It means you don't have to pass values from component to component using props. In certain cases, the use of props can be cumbersome; you can easily end up with a lot of components doing nothing with those values but passing them down to their children. With Context, you get direct access to the needed data. It makes Context a great candidate for implementing compound components.

They work together

This is the Modal in use:

// src/App.js

function App() {
  return (
    <Modal>
      <ModalOpenButton>Open modal</ModalOpenButton>
      <ModalContent title="Modal title here!" imageSrc="./forest.jpg">
        <p>
          Modal Content there!
        </p>
      </ModalContent>
    </Modal>
  );
}

The Modal component is a Context provider that yields a boolean state which says if the Modal is open or not.

// src/modal.js

const ModalContext = React.createContext();

function Modal(props) {
  const [isOpen, setIsOpen] = React.useState(false);

  return <ModalContext.Provider value={[isOpen, setIsOpen]} {...props} />;
}

ModalOpenButton consumes the state so that when clicked, the button it returns, set isOpen to true.

// src/modal.js

function ModalOpenButton({ children }) {
  const [, setIsOpen] = React.useContext(ModalContext);
  return <button onClick={() => setIsOpen(true)}>{children}</button>;
}

Then we have ModalContent, also consuming the ModalContext, that put contents (its children) in the Modal. It decides to render the Modal Box when isOpen is true otherwise returns null.

// src/modal.js

function ModalContent({ children, title, imageSrc }) {
  const [isOpen, setIsOpen] = React.useContext(ModalContext);

  return isOpen ? (
    <Overlay onClick={() => setIsOpen(false)}>
      <div
        css={{...}}
        onClick={(e) => e.stopPropagation()}
      >
        <div css={{...}}>
          <h2 css={{..}}>
            {title}
          </h2>
          <ModalCloseButton />
        </div>
        <div css={{...}}>{children}</div>
      </div>
    </Overlay>
  ) : null;
}

Once the Modal is open there are two ways of closing it: clicking the Overlay or the ModalCloseButton. Overlay is a styled component and ModalCloseButton another ModalContext consumer. They both set isOpen to false when clicked.

// src/modal.js

const Overlay = styled.div({...});

function ModalCloseButton() {
  const [, setIsOpen] = React.useContext(ModalContext);

  return (
    <button
      onClick={() => setIsOpen(false)}
      css={{...}}
    >
      <img alt="" src={timeSVG} />
    </button>
  );
}

Conclusion

Here is the list of our compound components:

Modal
ModalContent
ModalOpenButton
ModalCloseButton

They are all sync around a common state each taking action to bring specific functionality. Put them apart and they will not be as useful. Thanks for reading!