Add a Yup validation Schema to the react form using MUI as a UI component

React Hook Form is a React library that is used to make performant, flexible, and extensible forms with easy-to-use validation support.Dependenciesnpm i react-hook-formPass the rules to the React Hook Form useForm() function using yupResolver() functionThen inside your component, you can use the hook:const {        register,        control,   ...

Read More

How to Add Date picker field in your react form using MUI

 The DatePicker component let the user select a date, from the dropdownDependenciesnpm install @mui/x-date-pickers/AdapterDayjsnpm install @mui/x-date-pickers/LocalizationProvidernpm install @mui/x-date-pickers/DatePickerThe date picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.<LocalizationProvider id dateAdapter={AdapterDayjs}>   ...

Read More

How to convert String representation of Date to your Local Date Format in JavaScript React

You can convert the date string based on your current locations format by using following ways by using Date object.Date.prototype.toLocaleDateString()Syntax: toLocaleDateString()toLocaleDateString(locales)Example:toLocaleDateString()var date = new Date(e);//e is an event with value on Jan 30 2023 00:00:00 GMT-0600 (Central Standard Time)date.toLocaleDateString();//Output : 1/30/2023toLocaleDateString(locales): In...

Read More

How to Create Pie Chart in React

 Create a Custom Pie Chart with your data using Chart from https://www.chartjs.org/Dependenciesnpm i react-chartjs-2npm i chart.jsnpm install @mui/material Add the details for your Pie Chart which will be passed in the <PieChart> componentLabel: label of your pie chartData: Pass the data you want to display(I created a separate file that contains array of Data in JSON format and exported...

Read More

How to create Navigation Bar component in React using MUI

Create a new file and name it as NavigationBar and call it in your application as a static component.MUI has many examples and ways in which you can render the navigation content and actions related to the current screenDependencies:npm i react-router-domnpm install @mui/material @mui/icons-materialFor large screen deviceFor  small screen device1.Create AppBar  Component and...

Read More

Design and Prototype of Invoice Portal in Figma

A project needs a visualization of what it needs ,feels and looks like. Designing and Prototyping it is makes your UI and functional requirements quite clear if you do it in beginning of your project before Code phase. I used Figma for designing and prototyping of Invoice Portal.Following are the UI of my Invoice PortalSuppliers DashboardSupplier view Invoice listSupplier create Invoice Buyer...

Read More

UML diagram for creating a Invoice Portal

 I have a created a UML diagram for simple Invoice Portal with basic level of functionality.I used Figma to create the diagram, it was quick and easy to u...

Read More