DEV Community: NISHARGA KABIR

React Native Expo Custom Push Notifications

NISHARGA KABIR — Fri, 22 Aug 2025 06:30:42 +0000

Step 0 is for backend:

const express = require("express");
const { Expo } = require("expo-server-sdk") ;

const app = express();
const PORT = 8000;

const expo = new Expo();

app.use(express.json());

app.get("/", (req, res) => {
  res.send("Welcome to Expo Notification Backend");
});

app.post("/api/push-notification", async (req, res) => {
  const { token, title, body, metadata } = req.body;
  if (!Expo.isExpoPushToken(token)) {
    throw new Error("Invalid push token", 400);
  }

  const message = {
    to: token,
    sound: "default",
    title: title,
    body: body,
    data: metadata || {},
  };

  const tickets = await expo.sendPushNotificationsAsync([message]);

  return res.status(200).json(tickets);
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

We basically have to install this package.

"expo-server-sdk": "^3.15.0",

And using this we will send the notifications

expo.sendPushNotificationsAsync([message]);

Step 1: Generate Expo ID

eas init

We have to do this for our react-native expo project 🙂
When you generate an id you will also see it on the dashboard as well https://expo.dev/accounts/nisharga

Step 2: Create A Wrapper

Now on the app.tsx we have to create a wrapper

<PushNotificationManager> <View style={styles.container}> <Text>Open up App.tsx to start working on your app!</Text> <StatusBar style="auto" /> </View> </PushNotificationManager>

Now its time to create the PushNotificationManager

Step 3: 3/3 It mean you have to understand 3 things before go next :)

You will get the ID once you run the mobile app project

2.and using the ID you have to hit postman route

3.It wouldn't work on the emulator. Download Expo app on your phone and try this.

Step 4: Finally full code PushNotificationManager.tsx


import React, { useEffect, PropsWithChildren } from 'react';
import { Platform } from 'react-native';
import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';
import Constants from 'expo-constants';

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
  }),
});

const PushNotificationManager: React.FC<PropsWithChildren<{}>> = ({
  children,
}) => {

  const registerForPushNotificationsAsync = async (): Promise<
    string | undefined
  > => {
    let token;

    if (Platform.OS === 'android') {
      await Notifications.setNotificationChannelAsync('default', {
        name: 'default',
        importance: Notifications.AndroidImportance.MAX,
        vibrationPattern: [0, 250, 250, 250],
        lightColor: '#FF231F7C',
      });
    }

    if (Device.isDevice) {
      const { status: existingStatus } =
        await Notifications.getPermissionsAsync();
      let finalStatus = existingStatus;

      if (existingStatus !== 'granted') {
        const { status } = await Notifications.requestPermissionsAsync();
        finalStatus = status;
      }

      if (finalStatus !== 'granted') {
        console.warn('Failed to get push token for push notification!');
        return;
      }

      // Get Expo Push Token
      try {
        const projectId = Constants.expoConfig?.extra?.eas?.projectId;

        if (!projectId) {
          console.error('No project ID found. Please configure in app.json');
          return;
        }
        token = (
          await Notifications.getExpoPushTokenAsync({
            projectId: projectId,
          })
        ).data;
        console.log('Push Token:', token);
        return token
      } catch (error) {
        console.error('Detailed Error getting push token:', error);

        if (error instanceof Error) {
          console.error('Error name:', error.name);
          console.error('Error message:', error.message);
          console.error('Error stack:', error.stack);
        }
      }
    } else {
      console.warn('Must use physical device for Push Notifications');
    }
    return token;  
};
  useEffect(() => {
    registerForPushNotificationsAsync().then((token) => {
      if (token) { }
    });

// Notification received listener
    const receivedSubscription = Notifications.addNotificationReceivedListener(
      (notification) => {
        console.log(
          'Notification Received:',
          notification.request.content.data,
        );
      },
    );

    // Notification tap listener
    const responseSubscription =
      Notifications.addNotificationResponseReceivedListener((response) => {
        const data = response.notification.request.content.data;
        console.log('Notification Tapped:', data);
      });

    return () => {
      receivedSubscription.remove();
      responseSubscription.remove();
    };
  }, []);
  return <>{children}</>;
};

export default PushNotificationManager;`

Redux-Toolkit CRUD QUICK OVERVIEW

NISHARGA KABIR — Thu, 22 Aug 2024 19:18:08 +0000

Here, I am giving you a quick overview of Redux Toolkit use cases and performing a CRUD operation. I tried to keep it as brief as possible✅

I will start directly here. I’ve skipped the Redux Toolkit setup as well. I suggest that after reading this, you follow a playlist or take a crash course to learn, and also refer to the documentation for further learning. Let’s start the game! 😍😍😍

UnderStand concept

In Redux Toolkit or Redux, you may see two things:

1.Endpoint Type
2.Tags

Two endpoint types are in the redux toolkit. One is a query, and the other is a mutation. In Redux.... getAll or singleGet is called a query; without this, everything else is called a mutation.

You have to pass a tag inside every API route invalidatesTags or providesTags.
For queries, we use providesTags, which acts like an ID that we set for later use. For mutations, we use invalidatesTags, which simply call back the provided tag.
This means that after completing an /update, /delete, or /post route, the /get or /getAll route is automatically fetched, so we don’t need to refresh to see the updated data. ✅

Step 0: Boilerplate create

inside feature folder, i create driverSalaryApi.ts You can create as your wish 🙂

import { baseApi } from "../baseApi";

const driverSalaryApi = baseApi.injectEndpoints({
  endpoints: (build) => ({
    // ALL CODE WILL WRITE HERE
  }),
});


export const {  } = driverSalaryApi;

This is very basic structure. just create a variable and inject BaseApi. finally export it. ✅✅

Step 1: C for Create 😅

createDriverSalary: build.mutation({
      query: (data: any) => ({
        url: `/driver-salary/create`,
        method: "POST",
        data: data,
      }),
      invalidatesTags: ['salary'],
    }),

Using the build.mutation method, we can create anything. The baseURL is already added in the baseHome, so we don’t need to add the full URL repeatedly. Only just the endpoints. Finally export it.

export const { useCreateDriverSalaryMutation } = driverSalaryApi;

After typing use and the variable name, it will auto-import, so there's no need to worry about it.

Now just go to your page.tsx where you use this ✅

const [createDriverSalary] = useCreateDriverSalaryMutation();

import that mutation and use it

const onSubmit = async (data: any) => {
    try {
      const res = await createDriverSalary(data);
      if(res){
        console.log("res:", res)
      }
    } catch (error) {
      console.log("driver salary error", error);
    }
  };

Step 2: R for Read 😅

This is a getAll route.

getAllDriverSalary: build.query({
      query: (page) => ({
        url: `/driver-salary/list`,
        method: "GET",
      }),
      providesTags: ['salary'],
    }),

and export like this.

export const { useGetAllDriverSalaryQuery } = driverSalaryApi;

Now go to page.tsx and import our created query ✅

const { data: salaryDriver, isFetching, isLoading, } = useGetAllDriverSalaryQuery("");

finally console.log salaryDriver you will see the result..

getSingle

getSingleDriverSalary: build.query({
      query: (id: any) => ({
        url: `/driver-salary/single/${id}`,
        method: "GET",
      }),
      providesTags: ['salary'],
    }),

and export it

export const { useGetSingleDriverSalaryQuery } = driverSalaryApi;

finally go to that page.tsx ✅

const { data: driverSalarySingle } = useGetSingleDriverSalaryQuery("SINGLE ID PASS HERE");

For the getSingle route, we just need to pass the ID. The rest is the same as getAll. We can also use isLoading, isFetching, or isError here. For more information, you can refer to the documentation.

Step 3: D for Delete😅

deleteDriverSalary: build.mutation({
      query: (id: any) => ({
        url: `/driver-salary/delete/${id}`,
        method: "DELETE",
      }),
      invalidatesTags: ['salary'],
    }),

And export it

export const { useDeleteDriverSalaryMutation } = driverSalaryApi;

And in the page.tsx ✅

const [deleteDriverSalary] = useDeleteDriverSalaryMutation();

finally, use a handler function.

const onHandleDelete = async (data: any) => {
    try {
      const res = await deleteDriverSalary("DELETE ID");
      if(res){
        console.log("res:", res)
      }
    } catch (error) {
      console.log("driver salary error", error);
    }
  };

Step 4: U for Update😅

Remember that for updates, you need the ID as well as the updated data.

updateSingleUse: build.mutation({
            query: ({ id, ...data }) => ({
                url: `vehicle/update/${id}`,
                method: 'PATCH',
                data: data
            }),
            invalidatesTags: [tagTypes.user]
})

For updates, look at the method. If your backend API uses the PUT method, then use PUT, and if it uses the PATCH method, then use PATCH.

export const { useUpdateDriverSalaryMutation } = driverSalaryApi;

And uses

const [updateSingleUser] = useUpdateSingleUseMutation();

Then collect the updated data. Here, I’m using a simple variable, but in a real-life scenario, you would get your data from a form.

const updateData = {
        price: 10000,
        tax: 1000
    };

Finally, Now we will use handler function to trigger the API.

const handleUpdateData = async () => {
        const res = await updateSingleUser({
            id: '65d098133a2e34cc13f13551',
            ...updateData
        });
        console.log(':rocket: ~ handleUpdateData ~ res:', res);
    };

I hope you now have an idea of how to use Redux Toolkit. Thanks for reading. ☑☑☑

Node Docker App

NISHARGA KABIR — Sat, 13 Jul 2024 05:00:00 +0000

Our Funda is very simple. Just create a simple nodeJs app and dockerize it docker hub😘 ...

Step 0: create a folder and create a package.json file. and copy these code

{
  "name": "nodejs-image-demo",
  "version": "1.0.0",
  "description": "nodejs image demo",
  "author": "Nisharga Kabir",
  "license": "MIT",
  "main": "app.js",
  "keywords": [
    "nodejs",
    "bootstrap",
    "express"
  ],
  "dependencies": {
    "express": "^4.16.4"
  }
}

then do this command

npm install

This is nothing... just npm init and and doing some answers we can easily make this. but for fast going we ignore this process.

Please make sure you have installed node js and docker on your PC. (you will find lots of videos on YouTube to install docker and nodejs)

Let's Start the Game 😍😍😍

Step 1: create app.js on root and peast this code

const express = require("express");
const app = express();
const router = express.Router();


const path = __dirname + "/views/";
const port = 8080;


router.use(function (req, res, next) {
  console.log("/" + req.method);
  next();
});


router.get("/", function (req, res) {
  res.sendFile(path + "index.html");
});


router.get("/sharks", function (req, res) {
  res.sendFile(path + "sharks.html");
});


app.use(express.static(path));
app.use("/", router);


app.listen(port, function () {
  console.log("Example app listening on port 8080!");
});

This code says nothing. First, we do a basic setup of express.
Then we got pathName and port for future use. _ _ dirname is the absolute path of a file.
Next, we use console.log to see what request we are doing.

Using res.sendFile we say / will be the index.html route
And /sharks will be sharks.html route

Finally specifically said path and app. use router

Step 2: create two file views/index.html and views/sharks.html

(make sure to create views folder)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>About Sharks</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="css/styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather:400,700" rel="stylesheet" type="text/css">
</head>


<body>
    <nav class="navbar navbar-dark bg-dark navbar-static-top navbar-expand-md">
        <div class="container">
            <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
            </button> <a class="navbar-brand" href="#">Everything Sharks</a>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav mr-auto">
                    <li class="active nav-item"><a href="/" class="nav-link">Home</a>
                    </li>
                    <li class="nav-item"><a href="/sharks" class="nav-link">Sharks</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="jumbotron">
        <div class="container">
            <h1>Want to Learn About Sharks?</h1>
            <p>Are you ready to learn about sharks?</p>
            <br>
            <p><a class="btn btn-primary btn-lg" href="/sharks" role="button">Get Shark Info Now</a>
            </p>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <h3>Not all sharks are alike</h3>
                <p>Though some are dangerous, sharks generally do not attack humans. Out of the 500 species known to researchers, only 30 have been known to attack humans.
                </p>
            </div>
            <div class="col-lg-6">
                <h3>Sharks are ancient</h3>
                <p>There is evidence to suggest that sharks lived up to 400 million years ago.
                </p>
            </div>
        </div>
    </div>
</body>


</html>

sharks.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>About Sharks</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="css/styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather:400,700" rel="stylesheet" type="text/css">
</head>
<nav class="navbar navbar-dark bg-dark navbar-static-top navbar-expand-md">
    <div class="container">
        <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        </button> <a class="navbar-brand" href="/">Everything Sharks</a>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav mr-auto">
                <li class="nav-item"><a href="/" class="nav-link">Home</a>
                </li>
                <li class="active nav-item"><a hreaf="/sharks" class="nav-link">Sharks</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="jumbotron text-center">
    <h1>Shark Info</h1>
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <p>
                <div class="caption">Some sharks are known to be dangerous to humans, though many more are not. The sawshark, for example, is not considered a threat to humans.
                </div>
                <img src="https://assets.digitalocean.com/articles/docker_node_image/sawshark.jpg" alt="Sawshark">
            </p>
        </div>
        <div class="col-lg-6">
            <p>
                <div class="caption">Other sharks are known to be friendly and welcoming!</div>
                <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark">
            </p>
        </div>
    </div>
</div>
</html>

Finally views/css/style.css

.navbar {
    margin-bottom: 0;
}


body {
    background: #020A1B;
    color: #ffffff;
    font-family: 'Merriweather', sans-serif;
}


h1,
h2 {
    font-weight: bold;
}


p {
    font-size: 16px;
    color: #ffffff;
}


.jumbotron {
    background: #0048CD;
    color: white;
    text-align: center;
}


.jumbotron p {
    color: white;
    font-size: 26px;
}


.btn-primary {
    color: #fff;
    text-color: #000000;
    border-color: white;
    margin-bottom: 5px;
}


img,
video,
audio {
    margin-top: 20px;
    max-width: 80%;
}


div.caption: {
    float: left;
    clear: both;
}

Now do this command

node app.js

This command will start the server and you will start your node app 🙂
And visit this URL http://localhost:8080/ you will see your app running.

I am not describing code here. If you are here to learn node-docker I believe you already know HTML,CSS, and Bootstrap 😎😎😎

Step 3: DockerFile create

Create Dockerfile on root and peast this code

FROM node:16-alpine


WORKDIR /app


COPY . .


RUN npm install


EXPOSE 3000


CMD [ "node", "app.js" ]

we just say brother. take version 16 (alphine lite version) when you create container inside that app folder our app code will store. copy everything. this install all dependency and finally run it 3000 port with node command 😎

.dockerignore create on root

node_modules;
npm - debug.log;
Dockerfile.dockerignore;

this is just because we don't want node_modules folder and others stuff. 😎

Step 4: Build And Run

open docker app first then

docker build -t your_dockerhub_username/nodejs-image-demo .

I am doing here

docker build -t nisharga/nodeapp .

We are doing this command. -t means tagname we do it blank but if you wants you can set 🙂

Lets check image created or not by this command

docker images

REPOSITORY TAG IMAGE ID CREATED SIZE

We see more about these……. Repo is name. Tag is version id is specific thing. Created is time and size is size

NOW ITS TIME TO BUILD AND RUN 😀

docker build -t nkapp . && docker run -p 1200:8080 nkapp

Now just do these command, -t means tagName -p means port.
-p 1200:8080 means our app is running on port 8080 and we are now running our docker app in 1200 port override 8080.

http://localhost:1200/ Visit these URL you will see live app from docker build file.

Step 5: Push the code to docker hub

First register in hub.docker then do these command

docker login -u DOCKER_NAME

Then write password and login 🙂

Now Docker image Push to hubDocker

docker build -t nisharga/nkapp2:latest .

docker push nisharga/nkapp2:latest

I am building twice to remove confusion. I believe you are already familiar with GitHub. so you already know

githubUserName/RepoName/branchName

here 100% same to same to same thing. BranchName called here tagName. Repo is using appName. The username is used here dockerUser.

Now visit Docker Hub to see your code on docker. Now you can share with dockerize image with anyone, does not matter what device he is using he can easily run it with docker app 😎😎😎😎😎😎

Github Source Code: https://github.com/nisharga/node-docker

Implement ShadCn form with Validation

NISHARGA KABIR — Wed, 03 Jul 2024 10:07:24 +0000

Our Goal or Funda is very simple. Follow 4 steps implement a super duper form with validation with less code

Step 0: Define a zod schema



import { z } from 'zod';

export const createDepartmentsSchema = z.object({ 
    name: z.string().min(2, {
        message: 'Please enter your full name'
    }),
    remarks: z.string().min(2, {
        message: 'Subject must be at least 2 characters'
    }),
    description: z.string().min(20, {
        message: 'Message must be at least 20 characters'
    }), 
});

schema is nothing....... if you work with mongoose you already know it otherwise just think it just like typescript. whatever condition you write here if its not match it will show you this message on the UI.
(for more about zod schema you can google it)

Now start the process :)

Step 1. Define your form.



const form = useForm<z.infer<typeof createDepartmentsSchema>>({
     resolver: zodResolver(createDepartmentsSchema),
        defaultValues: {
         name: '',
         remarks: '',
         description: ''
      }
});

using zodResolver connect your schema with form...
when you update you can set your current value on default values...

Step 2. Define a submit handler.



 function onSubmit(values: z.infer<typeof createDepartmentsSchema>) {
        console.log(values);
 }

currently we do console.log here to see our form data.. later we will implement API here.

Step 3. Init your form



 <Form {...form}>
   <form
    onSubmit={form.handleSubmit(onSubmit)}
    className='space-y-6'>


    </form>
</Form>

First Form came from ShadCN which expect default values thats why we copy our form data. (step 1)
form onSumit is the default behavior of a form. we are already familer with it.. our 90% job done here ✅

Step 4: Final Step (Now its time to import input)

If you need a input field you can use your reUsable formInput (or you can use shadcn input here)...



<FormInput
   form={form}
   name='name'
   placeholder='Your Name'
   className='!pl-8 rounded-full'
/>

FormInput just expert (form) you can think it just a connection creator between input and forms 😁

If you need Textarea



<FormTextarea form={form} name='description' />

remember only form and name is required in every field. other fields are optional...

Finally a button need for submitting this form.



<Button type='submit'>Submit<Button>

If everything works... then without data submitting form show warring....

If everything ok then.....
After submit data show data on console.

Thanks for reading ❤❤❤

Debounce Method for Searching

NISHARGA KABIR — Sun, 23 Jun 2024 06:11:44 +0000

What is Debounce?

Debounce is nothing but a programming pattern for delaying the execution of a function or something...

Why do we use it? or Why is it important?

Look at this code.....

<input type='text' onChange={(e) => console.log(e.target.value)} />

and its output........

We type simple 2 words but it's calling 14 times!! If we integrate Search API here our API will be called 14 times for these words.

It will be costly for us. That is why the Debounce Method played its role in waiting some time and getting the result.

create a hook or a function for debounce 😎😎

const useDebounced = ({ searchQuery, delay }) => {
        const [debouncedValue, setDebouncedValue] =
            useState(searchQuery);
        useEffect(() => {
            const handler = setTimeout(() => {
                setDebouncedValue(searchQuery);
            }, delay);
            return () => {
                clearTimeout(handler);
            };
        }, [searchQuery, delay]);

        return debouncedValue;
    };

What do we do here...?? as a parameter we need two things searchQuery and delay time..

using useState we set our value here. and later we return it.
we use useEffect for calling this process infinite time changing searchQuery or delay value change it will be calling.

then we use a setTimeout function. its nothing just a prebuild function in javascript which is calling after a certain time.

and clearTimeout is another function for stoping that setTimeout function.

What is the logic behind this setTimeout and clearTimeOut here? Well we want the user to type something... After he writes the first character when he writes another character between the delay time stop calling the setTimeout here. finally return it

Now its time to implement it 🤩🤩

before return your nextjs or react component add this

const [value, setValue] = useState('');

const debouncedValue = useDebounced({ searchQuery: value, delay: 600 });  

console.log(debouncedValue);

and your input field

<input type='text' onChange={(e) => setValue(e.target.value)} />

Let me explain these two things. in inputs we set our values to the state value.
Then calling that function and as parameter pass our e.target.value and a delay time. finally console.log it.

Now see just calling two or three times base on our typing speed this debounce method will call 😍😍

Reusable React Hook Form

NISHARGA KABIR — Sat, 22 Jun 2024 06:26:47 +0000

We will use typescript with nextjs but you can use it as your wish funda is same as this ☺️☺️☺️

Install: npm install react-hook-form

Step 1: Create a Form.tsx file

import { useForm, FormProvider, SubmitHandler } from 'react-hook-form';
import React from 'react';

interface FormProps {
    children: React.ReactNode;
    defaultValues?: Record<string, any>;
    submitHandler: SubmitHandler<Record<string, any>>;
}

const Form = ({ children, defaultValues, submitHandler }: FormProps) => {
    const methods = useForm({ defaultValues });
    const { handleSubmit, reset } = methods;

    const onSubmit: SubmitHandler<Record<string, any>> = (data) => {
        submitHandler(data);
        reset(defaultValues); // Reset to default values after submit
    };

    return (
        <FormProvider {...methods}>
            <form onSubmit={handleSubmit(onSubmit)}>{children}</form>
        </FormProvider>
    );
};

export default Form;

Heres we do nothing. Just do copy peast from react hook form doc. 😅

We needs 3 things as perameter. Default value, submit handler and children….

Default value is used for user experience. We can reset it after form submits or we can handle it in our way.
Submit handler is the same thing you use in html… e.target.value do you forget it? It's the same.
And children no need to describe whatever you pass it it will take it.

FormProps is typescript declare you can ignore it. Now start the main agenda.

In the method variable, we take useForm which is the preBuild function for reactHookForm and as input, we pass our default value. Finally calling it into our formProvider.

Then handleSubmit and reset we destrure from methods. onSubmit Function

Form > form onSubmit > We use that handleSubmit function

And inside the onSubmit function we use reset….

And last one thing submitHandler came from reactHookForm

Inside the return function, we use the same convention as reactHookForm suggests us…… Our 60% job done. Now move to step 2;

Step 2: Create a FormInput.tsx file

import { Controller, useFormContext } from 'react-hook-form';

interface FormInputProps {
    name: string;
    type: string;
    placeholder?: string;
}

const FormInput = ({ name, type, placeholder }: FormInputProps) => {
    const { control } = useFormContext();
    return (
        <Controller
            control={control}
            name={name}
            render={({ field }) => (
                <input type={type} placeholder={placeholder} {...field} />
            )}
        />
    );
};

export default FormInput;

Basically, we are working here only name, type, and placeholder. If you want you can work with lots of things it depends on which CSS framework you use. We are using nothing.

We mainly need a controller component that came from reactHookForm.

Which expect three things.

control
name
render

Control is came from useFromContect Hook which is a preBuild thing for reactHookForm. No need to create it.
The name is same thing as we use in html input..
Using render method we will got field. Whatever things we pass into our inputs it will take it. As example in our form we pass size=”lg” so it will set here.

Our 95% work done. Now its time to use it. 😍😍

Step 3: create a file or in the app.ts / app.js file

before return peast this

const onSubmit = (data: Record<string, any>) => { console.log(data); };
this is nothing to describe in HTML lots of times you use it.

and
inside return

<Form submitHandler={onSubmit} defaultValues={{ name: '' }}> <FormInput type='text' name='name' placeholder='Name' /> <input type='submit' value='send' /> </Form>

Form and FormInput in our created Step1 and Step2 file. submitHandler came from reactHookForm and defaultValue whatever you wants you can pass. just remember its just a pattern of name field.

It will looks like this and after form submit we will got our values 😍😍😍