DEV Community: Toufic Nabi

React-hook-form validation

Toufic Nabi — Sat, 10 Jun 2023 23:44:52 +0000

When working with form in react projects, react-hook-form can be a lifesaver. This provides a great opportunity for us to handle form easily and handle the form validation efficiently.
Here's how you can add it to your project.

Necessary packages:
react-hook-form
yup
@hookform/resolvers

Step 1:
Install all those 3 packages

npm i react-hook-form yup @hookform/resolvers

Step 2:
Design your form like follows
WIP

How to validate react form in the front-end.

Toufic Nabi — Wed, 07 Jun 2023 10:39:59 +0000

Validating form in react/next app in the front end can be a tedious process. But following these simple steps you can validate your form in react app in the front end very easily.

Here's the code how you can implement that.

How to add dark theme easily in NextJS using Zustand and Tailwind.

Toufic Nabi — Sun, 28 May 2023 11:30:46 +0000

Ability to switching theme in your website gives your user a great user-experience. All modern websites nowadays have this feature where you can switch theme between dark and light with a click of a button. Also, the theme preference needs to be store so when the user comes back to the website they have their selected option right away.

Today we will implement theme switching to a Nextjs website using State Management Tool called Zustand and Tailwind. (We could do it using context API but Zustand will be useful in other part of this project, so I used Zustand).

Step 1:
Assuming you have installed and added tailwind in your project. If not, follow these instructions.

Install Zustand: Go into the terminal in vscode in your project folder, run the following command:

npm i zustand

Then create a folder in src folder if your project called store. Create a file called theme.store.js inside of the store folder. (These are the naming and folder structure convention)

Step 2:
Access the html tag
We have to use the html tag for switching theme using a data attribute called data-mode. To access the html tag in the nextjs project we have to use _document.js component provide by the nextjs team. This component goes inside of the pages folder for page based route system or app folder for App based route system.

Step 3:
Add the default theme in html attribute (data-mode) like this:

<Html lang='en-us' data-mode="light">
  <body>
    <Main />
    <NextScript />
  </body>
</Html>

Step 4: Edit the tailwind config
Let's edit how the dark theme works in Tailwind. Inside of tailwind.config.js file, add the darkMode key value pair like follows:

module.exports = {
  darkMode: ['class', '[data-mode="dark"]'],
  // other stuffs
}

Step 5: Theme switch button
Let's make a button that can switch our theme. Usually, the button goes into the header. Make a button you like. This can be a toggle button or a regular button. We will add the onClick event in step 7.

Step 6: Create the store
When using Zustand, the state management file is called a store. Head over to the theme.store.js file and add the theme element like follows:

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(persist(
    (set, get) => ({
        theme: "dark",
        setTheme: () => set((state) => ({
            ...state,
            theme: get().theme === "dark" ? "light" : "dark"
        })),
    }), {
        name: 'theme', // name of the item in the storage (must be unique)
    }
));

export const useTheme = () => useStore((state) => state.theme);
export const useSetTheme = () => useStore((state) => state.setTheme);

This will create, switch and store the theme in the localStorage of the browser.

Now we have access to the theme state and setTheme function in all the components throughout the project.

Step 7:
Import the theme, and setTheme items from the store to the header where your theme switch button is located like follows:

import {useTheme, useSetTheme} from '../store/theme.store';
const Header = () => {
  ...
  //get the values
  const theme = useTheme();
  const setTheme = useSetTheme();

  return (
    //your stuffs.
  )
}

then set the buttons onClick to the setTheme function. This action will switch the theme between dark and light, and store the value in localStorage.

Step 8:
Now head over to the _app.js file, inside of useEffect hook, grab the localStorage value for the theme like this:

const theme = useTheme();

useEffect(() => {
  try {
    const localTheme = JSON.parse(localStorage.getItem('theme'));
    if (localTheme) {
      document.documentElement.setAttribute('data-mode', localTheme.state.theme);
      document.documentElement.className = localTheme.state.theme;
    }
  } catch (err) {
    console.log('error loading the color theme')
  }
}, [theme])

Of course, you have to import the theme from the store for this as well.
We are using the theme as dependency so when our theme switch button updates the theme our value in html tag also changes from the localStorage.

Step 9: add classNames for dark theme
Now, go to any of your components or pages and add the class name for dark theme like follows:

<div className="text-black bg:white dark:text-white dark:bg-black">

You should see the theme switching and retaining the preference upon reloading the page.
Done!

Enjoy!

Install Google reCaptcha in your React/Next js app.

Toufic Nabi — Sun, 14 May 2023 08:07:35 +0000

To prevent the bots from sending you thousand message a day from your contact form, you should use some system to detect if the visitor is a real human or a bot pretending to be a human.

To do so, you can use google reCaptcha. reCaptcha can determine if a visitor is a human or a bot using a score. Thats all done at their end so we do not have to worry about that. This article will show how we can add google reCaptcha v3 or invisible captcha into a reactjs/nextjs website.

Step 1:
Install react-google-recaptcha-v3 into your project by running this in your ternimal in vscode.

npm i react-google-recaptcha-v3

Step 2:
Then go to the admin console of the google reCaptcha. You have to login using your gmail account.

Step 3:
Register a new site

Add a label (can be your site name or any name you prefer)
Select recaotcha type to v3 (score based)
Add your domain(s)
Agree to the terms and conditions and
Press Submit

Step 4:
You will get 2 keys under reCaptcha Keys section

Step 5:
Copy the site key because thats the key we need for this project

Step 6:
Go to your project in vscode, and go to file you want to add your google reCaptcha v3 (for this example we will add to the contact page where our form lives)

Step 7:
Import 2 utilities from the package we have installed in step 1

import { GoogleReCaptcha, GoogleReCaptchaProvider } from "react-google-recaptcha-v3";

Step 8:
Wrap the entire component with the provider like this

const contact = () => {
    return (
        <GoogleReCaptchaProvider reCaptchaKey="<YOUR SITE KEY FROM STEP 5>">
            //rest of your code goes here
        </GoogleReCaptchaProvider>
    )
}

Step 9:
We need a state to store the reCaptcha value, so lets import the setState function from react and initiate a state.

const [captcha, setCaptcha] = useState(null);

Step: 10
Inside of your form, before the submit button add the capthca component we imported in step 7

<textarea {...register("Message", {})} placeholder="Your Message" className='message' />
<GoogleReCaptcha onVerify={(val) => setCaptcha(val)} />
<input type="submit" value="Send" className='submit' />

This will set the captcha value to the captcha state we made.

Step: 11
Now inside your onSubmit function you can conditionally send the message or reject it based on the captcha value

const onSubmit = data => {
    if (captcha) {
        console.log(data);
        //send the mail
    }
}

Voilà! you are all set. Now bots can not annoy you with junk mails.

Deploying Next.JS app in Godaddy shared hosting correctly.

Toufic Nabi — Sat, 29 Apr 2023 12:29:38 +0000

Hosting a react app (next.js) in Godaddy Shared hosting can be a confusing job. Specially if you are using server side rendering. Godaddy shared hosting (in most cases) does not allow node apps.

But we can take advantage of the Static generation feature. Using Static generation we can generate a static html site. You can follow the following steps:

Go to package.json
Under Scripts object add a new key value pair like this
"genetate": "next build && next export"
then, navigate to next.config.js
Add the following code:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: 'export',
  distDir: 'dist',
  trailingSlash: true,
  assetPrefix: '.',
}

module.exports = nextConfig;

then from your terminal run the command:
npm run generate

Important thing to note here is the trailingSlash: true,
In godaddy if you navigate the site using the say navigation bar it works but if you reload a page other than the home page
for example /about/
it looks for the about directory which does not exist. So with trailingSlash: true, this command your pages will go on their respective directory.

Smooth onboarding and really happy with the UX here at Dev.to

Toufic Nabi — Fri, 28 Apr 2023 13:05:09 +0000

Developers and programmers are continuously looking for platforms that not only offer useful knowledge but also a seamless onboarding process and great user experience (UX) in the fast-paced world of technology. A standout example is Dev.to, which offers a simple onboarding process and leaves users feeling truly pleased with their whole experience. This essay will examine the distinctive features of Dev.to's onboarding and user experience.

A Friendly Environment: When you first arrive to Dev.to, you are met with a friendly interface that encourages exploration. The platform's clean design, logical layout, and intelligently arranged pieces make it simple to navigate. Whether you're a seasoned developer or a beginner, Dev.to's user-friendly layout allows you to quickly and easily find what you're searching for.

Customizable Interests and Feeds: Dev.to understands that each developer has different interests and preferences. During the onboarding process, you can choose your areas of interest, programming languages, and topics to investigate. This personalized approach guarantees that your feed is tuned to your unique requirements, giving a curated experience that corresponds to your preferences. This personalization increases user engagement and fosters a sense of belonging to the Dev.to community.

Collaboration and Seamless publication: One of Dev.to's major advantages is the simplicity of the publication procedure. The platform's user-friendly editor makes it simple to create and share your own content. The writing process is easy, allowing you to concentrate on your ideas rather than becoming sidetracked by complicated technical issues. Additionally, Dev.to promotes collaboration by allowing numerous authors to work on the same content, encouraging teamwork and the sharing of collective expertise.

Dev.to is the perfect example of what a simple onboarding procedure and top-notch UX should look like. When you first sign up for the platform, you are met with a friendly atmosphere and a tailored experience that is tailored to your interests. An excellent user experience is made possible by Dev.to's compelling content, active community, frictionless publishing, and helpful support. Dev.to offers a platform where you can learn, contribute, and grow alongside a welcoming community, regardless of your level of coding experience. It makes sense that users are content with Dev.to's onboarding procedure and user experience as a whole.