Build a powerful chat application using React Hooks

New updates and features of Angular 8

In our article on CSS-Tricks, we built a fully functional chat application in an easy, secure and fast way using React Hooks. You would think (and rightly so) that achieving this is no mean feat. Yes, that is how powerful React Hooks are!

In the article, we will take our chat app to the next level by adding some nifty features using a few more hooks. We will add the ability to show whether the user is online or offline, add local storage capabilities and clipboard functionality. Our chat app elements will also adapt to the current window size.

Perfect! Let’s dive right into building our chat app then.

React Hooks Chat App

Important Note – This article assumes you already have a working chat app as described in this article. Please go through the article, if you haven’t already done so, before proceeding further.

If you are looking at an introductory article on React Hooks, refer this one where we build a note taking app.

App features

The chat application will now have the following additional features:

  • Local storage of userid, room, allowing persistence of session.
  • Displaying whether the user is Online or Offline.
  • Displaying different elements depending on screen size.
  • Logging out of application when required.

Check out a glimpse of the completed app below:

Here is how it will look on a mobile device:

Building the App

1. use-localstorage

About the hook

We will have use-localstorage replace the useState hooks used previously to give persistence to user login. It allows us to use our local storage as a variable store in our application. Data that remains constant, such as username, room which the user is connected to, etc. is stored in localStorage, so that it persists between user sessions.

Advantage

If we want our app to have local storage capabilities and if we don’t intend to use this hook implies we would have to deal with the lower level localStorage API. LocalStorage API can’t be used directly as well since it requires type checking and lifecycle hooks to be used correctly. use-localstorage hook does that automatically for us, and so, we only need to consume the hook endpoint to use local storage.

Implementation

First, install the hook by running command

The hook is used as follows:

To use this hook, we simply replace our previous room & id useState hooks with this one.

Add this so that React logs back in if an id is present:

This simple change makes our app state remain the same between reloads

2. useOnlineStatus

About the hook

We use the useOnlineStatus hook to show the user when (s)he is online or offline. The hook listens to the window event listener and automatically returns true or false, depending on the current connectivity status.

Advantage

Checking for online status does not have a standardised API & each browser implements it differently. So, using useOnlineStatus gives us an assured way of knowing whether the user is online without writing multiple lines of code.

Implementation

Install the hook by running

The hook is used as follows:

with the “online” variable returning true or false depending on network status.

We will now import the hook, define it in our component, and return ‘You are Online’ or ‘You are Offline’ based on network status.

3. useWindowSize

About the hook

We use the useWindowSize hook to display different elements according to current width of browser window. It gets this value from the window event listener.

Advantage

Although getting window size does have a standard API, this hook allows us to skip all the boiler-plate and get the value instantly in the hook format.

Implementation

This hook is imported from the same library from which we imported the useOnlineStatus hook. So, if you have already installed it, move on to using the hook, otherwise, install the library by running

The hook is used as follows:

with the width hook automatically re-rendering our component when it changes.

The code we add will display ‘Send Message’ or an emoji, based on current width of screen.

Add this to the tag of HTML

Add this to App.js

React Hooks - UseWindowSize Hook
React Hooks - useWindowSize Hook Mobile Version

4. useClippy

About the hook

useClippy will allow our app to have the “Add to clipboard” functionality. It enables users to instantly copy a piece of content to clipboard.

Advantage

Even though implementing copy to clipboard functionality is moderately easy, this hook allows you complete read & write control over your clipboard in only a few lines of code.

Implementation

First, install the hook

This hook is used as follows:

with clipboard containing current copied text, and setClipboard setting its value.

Add an icon to each message by updating the Messages component with this

Add a onClick function to the icon so that it automatically copies the message content to clipboard when clicked.

The final component code will look like this

useClippy Hook

5. Finishing the app

As a final touch, we will add logging out functionality in our application.

We will simply set the id value as empty whenever the user clicks the cross icon We will also disconnect the socket from server so that server gets the disconnection message from client. You can check out the “logOut” code in the file below.

Congratulations! Your new chat app is now much more powerful!

The complete code for the project can be found here: https://github.com/akash-joshi/socket-blog-client.

What next?

You can now use your newly gained knowledge to make a lot of apps. Here are a few ideas to get you started:

  • Blogging Application
  • Instagram Clone
  • Reddit Clone
  • Beautiful Single Page Website

Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *

Sign Up for Our Newsletters

Receive insights and detailed articles across technology, design, remote working and freelancing.

You May Also Like