DEV Community: Elias Júnior

Creating masked inputs for React Hook Form

Elias Júnior — Tue, 23 Jan 2024 22:31:24 +0000

Sometimes I needed custom input fields in my forms like prices, Brazilian CPF/CNPJ, phone numbers, and others. Yes, I use the Controlled field, but let me use the price as an example: How would you handle a field that for the user shows "$ 1.59", but when you submit the form, you want to get the floating value of 1.59 instead of a string?

The answer is simple, which I call creating a formatter. The formatter will follow this structure:

export type Formatter<T = string> = {
  format: (value: T) => string;
  parse: (value: string) => T;
};

That means we are going to have an object with two methods:

format: which will take the raw value and format into a string
parse: which will take the string and parse again into a string

So a default formatter will be output and parse the same value:

export const defaultFormatter: Formatter = {
  format: (value) => value,
  parse: (value) => value,
};

But, now let's go to the price formatter that I used as an example. I will call it currencyFormatter.

export const currencyFormatter: (config?: {
  locale?: string;
  currency?: string;
}) => Formatter<number> = ({ locale = "pt-BR", currency = "BRL" } = {}) => {
  const numberFormatter = new Intl.NumberFormat(locale, {
    style: "currency",
    currency,
  });

  return {
    format: (value: number) => {
      return numberFormatter.format(value);
    },
    parse: (value: string) => {
      const rawValue = parseInt(value.replace(/\D/g, ""), 10) || 0;

      return rawValue / 100;
    },
  };
};

The format method is pretty simple: it will receive a value that is a number and should format using Intl.NumberFormat to the defined currency.

The parse instead will create a regex to extract all numbers in the string (eg: R$ 100,01 = 10001), and split by 100 to get the cents (maybe you want the integer value to handle payments without the floating value).

With this simple formatter, you already have a way to format and parse values, that you'll need to handle the input. Now you just need to create your ControlledInput component to do what you want:

import { ChangeEventHandler, FocusEventHandler, forwardRef } from "react";

import { useController } from "react-hook-form";
import { mergeRefs } from "react-merge-refs";

import { Formatter, defaultFormatter } from "./formatters";

type ControlledInputProps = {
  name: string;
  formatter?: Formatter<any>;
} & InputProps;

export const ControlledInput = forwardRef<HTMLInputElement, ControlledInputProps>(
  ({ name, formatter = defaultFormatter, ...props }, ref) => {
    const { field } = useController({
      name,
      defaultValue: props.value,
    });

    const inputRef = mergeRefs([ref, field.ref]);

    const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
      field.onChange(formatter.parse(event.target.value));
      props.onChange?.(event);
    };

    const onBlur: FocusEventHandler<HTMLInputElement> = (event) => {
      field.onBlur();
      props.onBlur?.(event);
    };

    const inputValue = field.value ? formatter.format(field.value ?? "") : "";

    return (
      <input
        {...props}
        name={name}
        ref={inputRef}
        onChange={onChange}
        onBlur={onBlur}
        value={inputValue}
      />
    );
  },
);

Notes:

I'm using react-merge-refs lib to keep the ref available for the input fields with React's forwardRef.
{...props} needs to be on the beginning or it will override the onChange and onBlur behavior.

Now you can wrap your form with FormProvider according to the documentation and insert your custom field like this:

<FormInput name="price" formatter={currencyFormatter()} />

Be free to optimize the code, as it's just a starter example.

How to make asynchronous requests to your API in React

Elias Júnior — Sun, 07 Nov 2021 02:51:54 +0000

This is a common problem that beginner React developers face when working on a new project. I will show here what you are doing and a method you can use to have a better and cleaner code (with tests!).

Let's suppose that we are developing a new blog application that will render a simple list of posts based on the response of our API. Usually what we have is this:

import { useEffect, useState } from 'react';

import axios from 'axios';

import { Post } from '../../types/post';
import Pagination from '../Pagination/Pagination';
import PostCard from '../PostCard/PostCard';

const DirBlogPosts: React.FC = () => {
  const [page, setPage] = useState<number>(1);
  const [posts, setPosts] = useState<Array<Post>>([]);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [isError, setIsError] = useState<boolean>(false);

  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);
        const { data } = await axios.get<Array<Post>>('https://example.com/posts', {
          params: { page },
        });
        setPosts(data);
      } catch (error) {
        setIsError(true);
      } finally {
        setIsLoading(false);
      }
    })();
  }, [page]);

  if (isLoading) {
    return <p>Loading posts...</p>;
  }

  if (isError) {
    return <p>There was an error trying to load the posts.</p>;
  }

  return (
    <div>
      {posts.map((post) => (
        <PostCard post={post} />
      ))}
      <Pagination page={page} onChangePage={setPage} />
    </div>
  );
};

export default DirBlogPosts;

Here we have the states page, posts, isLoading and isError. These states are updated when the component renders for the first time, or whenever the page is changed.

Can you see the problem here?

We have all the fetching logic inside our component;
We need to control many states manually;
It's hard to create automated tests.

But we can try to follow a different approach and create a cleaner code.

Build your service

First of all, taking advantage of Typescript's features, let's define what is a post:

// src/types/post.ts
export type Post = {
  id: number;
  title: string;
  imageUrl: string;
  content: string;
};

The post is basically an object with id, title , imageUrl and content.

Now we can create the definition of our "list posts service":

// src/services/definitions/list-posts-service.ts
import { Post } from '../../types/post';

export interface ListPostsService {
  list(params: ListPostsService.Params): Promise<ListPostsService.Result>;
}

export namespace ListPostsService {
  export type Params = {
    page?: number;
  };

  export type Result = Array<Post>;
}

Here we define that the "list post service" implementation should have a method called list, that will receive the defined params and return the defined result.

Why have we created an interface for that?

The answer is simple: our component will receive this service and execute it. The component doesn't even need to know if you will be using Axios or Fetch. Let's say your component will be agnostic. Sometime later you may need to change the Axios to Fetch, or even use Redux.

So, let's build our Axios service implementation:

// src/services/implementation/axios-list-posts-service.ts
import { AxiosInstance } from 'axios';

import { Post } from '../../types/post';
import { ListPostsService } from '../definitions/list-posts-service';

export default class AxiosListPostsService implements ListPostsService {
  constructor(private readonly axiosInstance: AxiosInstance) {}

  async list(params: ListPostsService.Params): Promise<ListPostsService.Result> {
    const { data } = await this.axiosInstance.get<Array<Post>>('/posts', {
      params: { page: params.page },
    });

    return data;
  }
}

This is our implementation using Axios. We need the Axios instance in the constructor, and in the method list we make the request to our endpoint /posts.

As we are already working on this service, let's also create a mocked version to use on the tests:

import faker from 'faker';
import lodash from 'lodash';

import { ListPostsService } from './list-posts-service';

export const mockListPostsServicesResult = (): ListPostsService.Result => {
  return lodash.range(10).map((id) => ({
    id,
    title: faker.lorem.words(),
    content: faker.lorem.paragraphs(),
    imageUrl: faker.internet.url(),
  }));
};

export class ListPostsServiceSpy implements ListPostsService {
  params: ListPostsService.Params;

  result: ListPostsService.Result = mockListPostsServicesResult();

  async list(params: ListPostsService.Params): Promise<ListPostsService.Result> {
    this.params = params;

    return this.result;
  }
}

We just need to store in the class the params and a mocked result to test using Jest later. For the mocked data, I like to use the Faker.js library.

Build your clean component

To manage all the loading and error states that we might need, I like to use the library React Query. You can read the documentation to get every detail on how to include it in your project. Basically you only need to add a custom provider wrapping your app, because the React Query also manages caches for the requests.

import { useState } from 'react';

import { useQuery } from 'react-query';

import { ListPostsService } from '../../services/definitions/list-posts-service';
import Pagination from '../Pagination/Pagination';
import PostCard from '../PostCard/PostCard';

type CleanBlogPostsProps = {
  listPostsService: ListPostsService;
};

const CleanBlogPosts: React.FC<CleanBlogPostsProps> = ({ listPostsService }) => {
  const [page, setPage] = useState<number>(1);
  const {
    data: posts,
    isLoading,
    isError,
  } = useQuery(['posts', page], () => listPostsService.list({ page }), { initialData: [] });

  if (isLoading) {
    return <p data-testid="loading-posts">Loading posts...</p>;
  }

  if (isError) {
    return <p data-testid="loading-posts-error">There was an error trying to load the posts.</p>;
  }

  return (
    <div>
      {posts!.map((post) => (
        <PostCard key={post.id} post={post} />
      ))}
      <Pagination page={page} onChangePage={setPage} />
    </div>
  );
};

export default CleanBlogPosts;

Do you see now how much cleaner it is? As a result of useQuery we have all the states that we need: our data, the loading and the error state. You don't need to use the useEffect for that anymore. The first parameter in useQuery can be a string or an array. When I include the page in this array, it means that the query will refetch using this new value (whenever the page changes, like in the useEffect).

I also added some data-testid that will be used for testing. So, let's build it!

Build your component test

Our component required the listPostsService, so let's use the ListPostsServiceSpy that we created before. Using this we won't make a real HTTP request, because it's a "fake service".

import { render, screen } from '@testing-library/react';
import reactQuery, { UseQueryResult } from 'react-query';

import { ListPostsServiceSpy } from '../../services/definitions/mock-list-posts-service';
import CleanBlogPosts from './CleanBlogPosts';

type SutTypes = {
  listPostsServiceSpy: ListPostsServiceSpy;
};

const makeSut = (): SutTypes => {
  const listPostsServiceSpy = new ListPostsServiceSpy();

  return {
    listPostsServiceSpy,
  };
};

jest.mock('react-query', () => ({
  useQuery: () => {
    return {
      data: [],
      isLoading: false,
      isError: false,
    };
  },
}));

describe('CleanBlogPosts', () => {
  it('should show loading state', async () => {
    const { listPostsServiceSpy } = makeSut();

    jest.spyOn(reactQuery, 'useQuery').mockReturnValueOnce({
      data: listPostsServiceSpy.result,
      isLoading: true,
      isError: false,
    } as any);

    render(<CleanBlogPosts listPostsService={listPostsServiceSpy} />);

    expect(screen.getByTestId('loading-posts')).toBeInTheDocument();
  });

  it('should show error state', async () => {
    const { listPostsServiceSpy } = makeSut();

    jest.spyOn(reactQuery, 'useQuery').mockReturnValueOnce({
      data: listPostsServiceSpy.result,
      isLoading: false,
      isError: true,
    } as any);

    render(<CleanBlogPosts listPostsService={listPostsServiceSpy} />);

    expect(screen.getByTestId('loading-posts-error')).toBeInTheDocument();
  });

  it('should list the posts', async () => {
    const { listPostsServiceSpy } = makeSut();

    jest.spyOn(reactQuery, 'useQuery').mockReturnValueOnce({
      data: listPostsServiceSpy.result,
      isLoading: false,
      isError: false,
    } as UseQueryResult);

    render(<CleanBlogPosts listPostsService={listPostsServiceSpy} />);

    const posts = await screen.findAllByTestId('post-card');

    expect(posts).toHaveLength(listPostsServiceSpy.result.length);
  });
});

We added 3 tests:

loading state: check if our useQuery returns the state isLoading: true, we will render the loading component.
error state: check if our useQuery returns the state isError: true, we will render the error component.
success: check if our useQuery returns the state data, we will render what we want (the list of posts cards). I also checked if we rendered the same amount of posts returned by our service.

Conclusion

This is not "the best solution for your API". Each case might need a different solution. But I hope this helps you to see the alternatives for developing a better code.

Another alternative is to create a custom hook called useListPosts() that will return the same state as useQuery, but you also decouple the React Query from your component and use your own implementation in order to create more tests.

Unfortunately, it is not common to see automated tests in front-end code, it is rarely taught in courses. Now open your VSCode and try it :)

Avoid components hell in React

Elias Júnior — Sat, 09 Oct 2021 03:21:49 +0000

Hello everyone. In this article I will focus on what the best way is, in my opinion, to handle “components cascade” in React. Using this approach, your application will be well organized and you’ll make it more readable and easier to maintain.

import AppRoutes from 'src/components/AppRoutes';
import store from 'src/store/store';
import theme from 'src/styles/theme';

import { ChakraProvider } from '@chakra-ui/react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 0,
      retry: false,
      refetchInterval: false,
      refetchOnMount: false,
      refetchOnReconnect: false,
      refetchOnWindowFocus: false,
    },
  },
});

const App = () => {
  return (
    <ChakraProvider theme={theme}>
      <QueryClientProvider client={queryClient}>
        <Provider store={store}>
          <BrowserRouter>
            <AppRoutes />
          </BrowserRouter>
        </Provider>
      </QueryClientProvider>
    </ChakraProvider>
  );
};

export default App;

Looks like hell, doesn't it? But imagine that you have even more providers, or these providers have many properties that you need to include.

But, what is the problem? I have some points here:

You can’t use the useLocation() hook in the App component, because you’re including the BrowserRouter on the same component, so you can only use the hook in a child component.
You may face some conflicts when importing multiple providers from many libraries (or even your own code). So you will need to rename import { Provider as ReduxProvider } from 'react-redux’ for example.
When you want to remove a provider, your commit will have many changed lines in your code, because your editor will reindent all child components at least 1 column to the left.

I could point out other problems here, but I think that’s enough.

The solution

We have a technique in React for reusing component logic. It’s called high-order component (the HOC). It’s basically a function what will wrap your component with any other component that you want.

Create a generic type for HOCs

So if we are looking to make reusable components, we need to create a type definition for our HOCs (only if you’re using Typescript):

export interface ReactHoc {
  <P>(WrappedComponent: React.ComponentType<P>): React.FC<P>;
}

Don’t panic! Let me explain what is happening here:

Line 1: we are declaring the interface ReactHoc;
Line 2: <P> declares that we will receive some param of type P (any type) - this is because we don’t know what property the React component will have;
Line 2: (WrappedComponent: React.ComponentType<P>) we are receiving a param WrappedComponent that has the type React.ComponentType<P>, a React Component with the P params.
Line 2: React.FC<P> we are returning a new React functional component with the same params as our WrappedComponent.

Yes, it’s a little difficult, but you will get used to working with Typescript typing. If you don't understand that now, you will later, don’t worry.

Create your first HOC

Now for the easy part! Let’s create our React Redux HOC:

import store from 'src/store/store';
import { ReactHoc } from 'src/types/hocs';

import { Provider } from 'react-redux';

const withRedux: ReactHoc = (Component) => (props) =>
  (
    <Provider store={store}>
      <Component {...props} />
    </Provider>
  );

export default withRedux;

Line 6: we are declaring the function name. It will have the type of the ReactHoc, a function that will receive a component and will return another React component.
Line 8: we add the Redux provider, as we did before;
Line 9: now we need to render the component we want to wrap, passing all parameters to it.

You will need to create other HOCs for the other providers: withChakraUi, withReactQuery, withReactRouter ...

And in the end, you will need to compose your app with all that HOCs. For that, I like to use the Recompose library. It has other powerful uses, but for now we will use only the compose.

import AppRoutes from 'src/components/AppRoutes';
import withChakraUI from 'src/hocs/with-chakra-ui';
import withReactQuery from 'src/hocs/with-react-query';
import withReactRouter from 'src/hocs/with-react-router';
import withReactSuspense from 'src/hocs/with-react-suspense';
import withRedux from 'src/hocs/with-redux';

import { compose } from 'recompose';

const App = () => {
  return <AppRoutes />;
};

export default compose(
  withChakraUI,
  withReactSuspense,
  withReactRouter,
  withReactQuery,
  withRedux,
)(App);

Your App component is now clean and beautiful! If you need to remove the redux, you just need to remove the withRedux and it’s done! One line in your commit (actually two, as you will need to remove the import line 😁)

Make good use of what you have just learned and leave your comment or question below. And if you liked, please like and share.