Forem: Rick1196

How to debounce a input text on React

Rick1196 — Mon, 09 Jan 2023 02:50:23 +0000

Let's explain what a debounce function

A debounce function does not execute at call time, it waits a specific number of times to be executed if the function it's called again before being executed, the time restarts, this will happen N number of times until the function can execute

How can I achieve this with react?

First we need to check how the `setTimeout` function works

This function allows us to execute a block of code after a certain amount of time, it returns a unique identifier which will allow us to clear that time out every time we call our function with the help of another function called clearTimeout which gets an identifier of the time out

All this is possible thanks to the global scope of javascript, if want to learn more about this, you can check the official documentation

Now we need to build our debounce function

Let's store the ID of the timeout

    let timeoutID  = null

A varaible with no value on it

Let's build the function that will clear the time out and set the new one

const debounceFunction = (params) =>{
    clearTimeout(timeoutID);// the timeout will be removed, so the code won't be executed
    timeoutID = setTimeout({ // set the new timeout
        //...your custom code
    },500)
}

Let's check a full example

Let's create a small example to use useRef to bind elements

Rick1196 — Mon, 23 Aug 2021 16:57:50 +0000

Avoid invalid inputs in react

So you want to avoid your user typing invalid characters in, for example, a numeric input? You only need a custom hook and a regex or a custom function.

Important note!!!: This validation will not replace any validation library and will not work on mobile devices.

your can check the a code and a live demo at code sandbox

Lets build the custom hook

Let's add a custom hook to add an event listener to a specific element and trigger a function when that event happens.

import React, { useEffect } from "react";

type EventListenerParams = {
  action: (event: Event) => void; // what do we want to perform with the event
  event: string; // what event do we want to listen for
  reference: React.RefObject<HTMLInputElement>; // the element that we want to bind to the listener
};

/**
 * Add a event listener for a specific event to a specific element
 */
const useEventListener = (params: EventListenerParams): void => {
  useEffect(() => {
    // on init add event listener
    params.reference.current?.addEventListener(params.event, params.action);
    // on component unmounted, remove the event listener to avoid performance issues
    return () =>
      params.reference.current?.removeEventListener(
        params.event,
        params.action
      );
  }, [params.reference, params.event, params.action]);
};

export default useEventListener;

With this custom hook, You just need to pass the parameters for each element or event you want to listen for; don't forget to add the return statement to the custom hook, to remove the event listener at component unmount.

What's the difference between bind elements with useRef and getElementById?

By selecting the element with getElementById you will get the first one that the function finds in the DOM tree, so, if you re-use a component with this validation, it will work only for the first instance

And if you use React.createRef you will bind an specific instance of an element, so the biding will be unique for each instance

Now lets create a couple of validation functions to test our custom hook

The first one to validate the length of an input value
The second one to validate if the value of an input matches with a regex

/**
 * Check if the current length of the input value is minor to a fixed length
 * @param maxLength of your input
 */
export function lengthValidator(maxLength: number) {
  return function validation(event: Event): void {
    const element = event.target as HTMLInputElement;
    // if the value length is already equals to maxLength
    if (element.value.length >= maxLength) {
      //  cancel the event and their side effects
      event.preventDefault();
    }
  };
}
/**
 * Check if the current value of the input plus the key pressed match with a pattern
 * @param regex to compare the input value
 */
export function matchValidator(regex: RegExp) {
  return function validation(event: Event): void {
    // get the element
    const element = event.target as HTMLInputElement;
    // get the element current value plus the input key value
    const stringToValidate = String(
      element.value + (event as KeyboardEvent).key
    );
    // if input value does not match with the regex
    if (!stringToValidate.match(regex)) {
      // cancel the event and their side effects
      event.preventDefault();
    }
  };
}

Now lets add some input fields to test our creation

import React from "react";
import "./styles.css";
import useEventListener from "./use-event-listener";
import { lengthValidator, matchValidator } from "./validations";

export default function App() {
  const inputRef = React.createRef<HTMLInputElement>();
  const inputRef2 = React.createRef<HTMLInputElement>();
  /**
   * Validates that max-length field never be longer than 10
   */
  useEventListener({
    action: lengthValidator(10),
    event: "keypress",
    reference: inputRef
  });
  /**
   * Validates that numbers-only always contains numeric characters
   */
  useEventListener({
    action: matchValidator(new RegExp("^[\\d]+$")),
    event: "keypress",
    reference: inputRef2
  });
  return (
    <div className="App">
      <div>
        <label>Input for with max length of 10</label>
        <input
          placeholder="Enter a name with no more of 10 characters"
          type="text"
          id="max-length"
          ref={inputRef}
        />
      </div>
      <div>
        <label>Input only for numbers</label>
        <input
          ref={inputRef2}
          placeholder="Enter only numbers"
          type="text"
          id="numbers-only"
        />
      </div>
    </div>
  );
}

And that's all, now you can use the custom hook in all the components you want, and you can implement your validation functions.

Let's create a simple Weather App with React

Rick1196 — Sat, 31 Jul 2021 21:10:09 +0000

App description

Let's create a basic weather app with React(typescript), Weather API, sass, and react hooks

Github repo
Live demo

Let's set our workspace

Create our react project with create-react-app

npx create-react-app basic-weather-app --template typescript

Now let's config linter, jest, etc.

npx cra-to-nx

This will config our dev tools

npm packages

yarn add axios @fortawesome/fontawesome-free react-i18next i18next i18next-browser-languagedetector

Axios for our HTTP requests
fontawesome to display awesome icons
i18next to add internationalization to our app
- i18next-browser-languagedetector to detect the users default lang and set it as our defalt language

Folder structure

NX create a larger folder structure, but This is the final structure of our project

 ─src
    ├───assets
    │   ├───design -> Design system
    │   │   ├───components
    │   │   ├───fonts
    │   │   ├───globals
    │   │   └───util
    │   ├───i18n -> Translations
    │   │   ├───en
    │   │   └───es
    │   └───images
    ├───components
    │   └───landing
    ├───custom-hooks
    ├───functions
    ├───interfaces
    └───services

Add weather Api

Let's create an account at Weather API

After creating our account, let's create an API key for Current Weather Data
Note: you will need to wait like 2 hours for your api key to be activated

Let's add our i18next config

(assets/i18n)

I just add a basic translations files for EN and ES, you can find them at src/assets/i18n

Let's add our weather services to our project

If you have not created your services folder, create it and inside it, let's create a new ts file named weather-service
Lest create our interfaces The interfaces will serve us as data models for the Weather API responses and some other purposes

CurrentWeatherI (interfaces/current-weatherI.ts) The data model of the response of the weather API's
WeatherPropertiesI (interfaces/weather-properties.ts) The data model of requests to weather API's (interfaces/)

now let's create 3 functions
- currentWeather
This function will retrieve weather data by coordinates
- getWeatherCity
This function will retrieve weather data by city name
- getWeatherIcon
The currentWeahter and getWeatherCity will return an icon code in their properties, this code will serve us to retrieve an icon image to display in our app
(services/weather-services.ts)
Now that we have our services for the app, let's create a function to get the correct background image depending on the current weather

To achieve this, first, we need to check their current weather API documentation for their weather code at weather codes, i decided to group the codes by range, but you can go deeper.

(functions/weather-background.ts)

You can use the same images as me, you can find them at my source code at github

Or search for your own, i found my images at unsplash

Our next step is to build a custom hook to get the client lat and long

For this we are gonna use window.navigator.geolocation
(custom-hook/use-position.ts)

This hook will provide us with the current location of our user, so now we can request the weather of the current location.

Now let's create our main component

(components/landing.tsx)

In this component, we are gonna use the next element

2 buttons, one to search the location input and another to return to the current location weather
1 input field to search places
A cards deck to display the weather info

Use our custom hook use-position

The first step to build our component is to connect our use position custom hook to get the user position and ask for the current weather
Now that we have the position stored, let's pass it as a dependency to an useEffect hook, so every time that the position variable changes, the effect will execute the getWeather function; The getWeather function will call the getWeather callBack, await for the service response then results will be store at the weather state; then the functions getWeatherIcon and readWeatherImage will be call and this functions will update the watherIcon and weatherImage state respectively, the change at weatherImage will trigger the effect to set the image as the body tag background image property value.

Now that we have the weather, the weatherImage and the weatherIcon, we can use this data to show it to the user.

(components/landing/landing.tsx)

Where to know more about the topics to build a basic project like this?

(react hooks)[https://reactjs.org/docs/hooks-intro.html]
(react custom hooks)[https://reactjs.org/docs/hooks-custom.html]
(geolocation api)[https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API]
(react-18n-next)[https://react.i18next.com/]
(react-form-hooks)[https://react-hook-form.com/get-started]
(Nx)[https://nx.dev/latest/react/getting-started/intro]

Wher is the sass explanation??

I will write a second post to cover the design of the project

Let's create a simple weather app - Part 2