DEV Community: Md Mostafizur Rahman

Building a Drag-and-Drop Page Builder with React: A Complete Guide

Md Mostafizur Rahman — Mon, 07 Jul 2025 13:32:38 +0000

Creating a visual page builder has become essential for modern web applications. Whether you're building a CMS, a website builder, or just want to give users more control over their content, a drag-and-drop interface can significantly improve the user experience. In this comprehensive guide, we'll walk through building a powerful page builder using the @dndbuilder.com/react package.

What We'll Build

By the end of this tutorial, you'll have a fully functional page builder that includes:

🖱️ Drag-and-drop interface for arranging content blocks
🧩 Custom blocks with editable properties
🎨 Visual controls for styling and configuration
💾 Content persistence and rendering
📱 Responsive design capabilities

Why Choose @dndbuilder.com/react?

The @dndbuilder.com/react package stands out because it offers:

Block-based architecture that's easy to understand and extend
Built-in undo/redo functionality powered by Redux
Responsive design tools for mobile-first development
Extensible API for creating custom blocks and controls
Server-side rendering support for production applications
Tree-shakable imports to keep your bundle size minimal

Getting Started

Installation

First, let's install the package and its dependencies:

npm install @dndbuilder.com/react
# or
yarn add @dndbuilder.com/react
# or
pnpm add @dndbuilder.com/react

Quick Start

Create a basic editor component to get started:

import React, { useState } from "react";
import { Editor, BuilderProvider, store } from "@dndbuilder.com/react";
import "@dndbuilder.com/react/dist/style.css";

const editorConfig = {
  blocks: [], // We'll add blocks here
};

function App() {
  const [initialContent, setInitialContent] = useState({});

  return (
    <BuilderProvider store={store}>
      <div className="app-container">
        <Editor 
          content={initialContent} 
          builderConfig={editorConfig} 
        />
      </div>
    </BuilderProvider>
  );
}

export default App;

That's it! Now, you will able to see the drag and drop editor in your application.

Understanding Core Concepts

Before diving into custom blocks, let's understand the key concepts:
1. Editor
The Editor is the main component that provides the drag-and-drop interface for building pages. It manages the state of the page content and provides tools for editing blocks.
2. Blocks
Blocks are the building units of your pages. Each block represents a specific type of content (heading, paragraph, image, etc.).
3. Controls
Controls provide the interface for users to configure block properties like text, colors, spacing, and other styling options.
4. Store
The store manages the editor's state, including content structure, selected blocks, and undo/redo history.
5. Settings
Settings contain the configuration data for each block instance.

Working with Content

Saving Content

Use the useContent hook to save content as shown in the documentation:

import { useContent } from "@dndbuilder.com/react/hooks";

function SaveButton() {
  const { content, saveContent } = useContent();

  const handleSave = async () => {
    // Save content to your backend or local storage
    try {
      await fetch("/api/save-content", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ content }),
      });
      saveContent(); // Mark content as saved
    } catch (error) {
      console.error("Failed to save content:", error);
    }
  };

  return <button onClick={handleSave}>Save Content</button>;
}

Rendering Content

To render content on the frontend, use the RenderContent component exactly as documented:

import { RenderContent } from "@dndbuilder.com/react/components/server";
import { editorConfig } from "./editorConfig"; // Your editor configuration

async function ContentPage() {
  // Fetch content from your backend
  const response = await fetch("/api/get-content");
  const { content } = await response.json();

  return (
    <div className="page-container">
      <RenderContent content={content} builderConfig={editorConfig} />
    </div>
  );
}

Creating Your First Custom Block

Let's create a simple block that includes a title and a description.

To create a custom block, you need to:

Create a component for your block
Create a control component to control block's property. (Optional)
Define the block configuration using createBlockConfig utility
Include the block in your editor configuration

Here's a simplified example of creating a custom block:

//my-block.tsx
import React from "react";
import { BlockProps } from "@dndbuilder.com/react/types";

const MyBlock = ({ settings, meta }: BlockProps) => {
  return (
    <div className="my-custom-block">
      <h3>{settings.title}</h3>
      <p>{settings.description}</p>

    </div>
  );
};

export default MyBlock;

Create a control component

//my-block-control.tsx
import React from "react";
import { ControlProps } from "@dndbuilder.com/react/types";
import { TextInput } from "@dndbuilder.com/react/components";

const MyBlockControl = ({ settings, updateSettings }: ControlProps) => {
  return (
    <div className="control-panel">
      <TextInput
        label="Title"
        value={settings.title || ""}
        onChange={(value) => updateSettings({ title: value })}
      />
      <TextInput
        label="Description"
        value={settings.description || ""}
        onChange={(value) => updateSettings({ description: value })}
      />
    </div>
  );
};

Define your block configuration

//my-block.config.ts
import { createBlockConfig } from "@dndbuilder.com/react/utils";
import { lazy } from "react";
import { FiBox } from "react-icons/fi";

const MyBlockConfig = createBlockConfig({
  type: "my-block",
  label: "My Custom Block",
  icon: FiBox,
  component: lazy(() => import("./my-block")),
  isVisible: () => true,
  group: "Custom",
  settings: {
    title: "Default Title",
    description: "Default description text",
  },
  controls: [
    {
      label: "Content",
      component: lazy(() => import("./my-block-control")),
    },
  ],
});

export default MyBlockConfig;

Include the block in your editor configuration

import MyBlockConfig from "./blocks/my-block/my-block.config";

export const editorConfig = {
  blocks: [
    MyBlockConfig,
    // Other blocks...
  ],
};

Overriding Existing Blocks

You can override existing blocks by extending their configuration, as shown in the documentation:

import { BlockType } from "@dndbuilder.com/react/types";
import { createBlockConfig } from "@dndbuilder.com/react/utils";
import { lazy } from "react";

// Override the Heading block configuration
const CustomHeadingConfig = createBlockConfig({
  type: BlockType.HEADING, // Use the existing block type
  component: lazy(() => import("./components/custom-heading.block")),
  // Override other properties as needed
  controls: [
    {
      label: "Custom Style",
      component: lazy(() => import("./components/custom-heading-style.control")),
    },
  ],
});

// Include the overridden block in your editor configuration
export const editorConfig = {
  blocks: [
    CustomHeadingConfig,
    // Other blocks...
  ],
};

Conclusion

The @dndbuilder.com/react package provides a robust foundation for building drag-and-drop page builders. By following the patterns and examples from this article, you can create powerful, customizable page builders that provide excellent user experiences.
The key is to start with the basic setup, understand the core concepts, and gradually build complexity by adding custom blocks and advanced features. The package's extensible architecture makes it easy to scale from simple use cases to complex, production-ready applications.

Next Steps

Explore the comprehensive documentation for more advanced features
Contact support at support@dndbuilder.com for help with specific use case

Function Overloading in TypeScript: A Powerful Tool for Flexible Type-Safe Operations

Md Mostafizur Rahman — Thu, 24 Aug 2023 08:37:12 +0000

TypeScript, a superset of JavaScript, has gained popularity in the world of web development due to its ability to add static typing to the dynamic nature of JavaScript. One of the standout features that TypeScript brings to the table is "function overloading," a powerful technique that allows developers to define multiple function signatures for a single function name. This enables the creation of more flexible and type-safe code, enhancing the developer experience and reducing the chances of runtime errors.

Understanding Function Overloading

Function overloading is a concept that originates from object-oriented programming and is widely used in languages like Java and C#. TypeScript has adopted this concept to bring type safety and predictability to JavaScript functions.

In simple terms, function overloading allows you to define multiple ways to call a function with different parameter types and numbers. The TypeScript compiler, during compile-time, analyzes the provided argument types and selects the appropriate function signature to enforce type safety.

Using Function Overloading in TypeScript

To define function overloads in TypeScript, you follow a specific pattern that consists of listing out the various function signatures followed by the actual function implementation. Let's dive into a more practical example of function overloading in TypeScript. Imagine you're building a geometry library, and you want to create a function that calculates the area of different geometric shapes: circles, rectangles, and triangles.

// Circle
function calculateArea(radius: number): number;
// Rectangle
function calculateArea(width: number, height: number): number;
// Triangle
function calculateArea(base: number, height: number): number;

// Implementation
function calculateArea(arg1: number, arg2?: number): number {
    if (arg2 === undefined) {
        // Circle
        return Math.PI * Math.pow(arg1, 2);
    } else {
        if (arg1 === arg2) {
            // Square
            return arg1 * arg2;
        } else {
            // Rectangle or Triangle
            return 0.5 * arg1 * arg2;
        }
    }
}

console.log(calculateArea(5)); // Calculates the area of a circle with radius 5
console.log(calculateArea(4, 4)); // Calculates the area of a square with side length 4
console.log(calculateArea(6, 8)); // Calculates the area of a rectangle with width 6 and height 8
console.log(calculateArea(3, 7)); // Calculates the area of a triangle with base 3 and height 7

In this example, we have a function called calculateArea that is overloaded with three different signatures:

Calculate the area of a circle by providing the radius.
Calculate the area of a rectangle by providing the width and height.
Calculate the area of a triangle by providing the base and height.

The actual implementation of the function checks the number of arguments passed and their values to determine which geometric shape's area should be calculated. This approach allows you to use a single function name for different shapes, making the code more organized and easier to understand.

By using function overloading, you ensure that the function is used correctly based on the provided arguments. If someone tries to call calculateArea with the wrong number or type of arguments, TypeScript will raise a compile-time error, preventing potential bugs and runtime issues.

Creating a type safe `objectKeys` function

Md Mostafizur Rahman — Thu, 24 Aug 2023 02:35:49 +0000

In the world of TypeScript development, encountering the Object.keys function can sometimes lead to a frustrating experience. Consider a scenario where you have an object with keys apple, banana, and cherry. When attempting to iterate over these keys extracted from Object.keys, TypeScript treats the keys as strings. That means that when I try to access it I get this horrible long type error. No index signature with parameter of type string was found in type '{ apple: string; banana: string; cherry: string;}'.

export const fruitBasket = {
  apple: "Apple",
  banana: "Banana",
  cherry: "Cherry"
};

Object.keys(fruitBasket).forEach((key) => {
  console.log(myObject[key]);
});

In this snippet, we're encountering the issue. Even though the keys are apple, banana, and cherry, TypeScript treats them like ordinary strings. This leads to frustrating type-related problems when trying to use these keys to access the actual properties.

So let's build our own objectKeys function that plays well with TypeScript's rules. This custom function uses TypeScript's generics and the keyof operator (which grabs the real key types) to ensure things are typed properly.

function objectKeys<O extends object>(obj: O): (keyof O)[] {
  return Object.keys(obj) as (keyof O)[];
}

Here's what's happening with the function:

objectKeys is what we've named our function.
<O extends object> is a generic type parameter. It allows us to accept various types of objects while retaining the original type information.
(obj: O) is a function parameter named obj with the type O. This means the function can take an object of any type.
: (keyof O)[] specifies the return type of the function. It's an array containing keys of type (keyof O).

Now, when we use objectKeys(fruitBasket), each key inside the loop is treated as apple, banana, or cherry.

objectKeys(fruitBasket).forEach((fruit) => {
  console.log(fruitBasket[fruit]);
});

Introducing an Open-Source Admin Dashboard Template Based on Tailwind CSS

Md Mostafizur Rahman — Tue, 23 May 2023 15:46:10 +0000

In today's digital landscape, web developers often face the challenge of building efficient and visually appealing admin dashboards. These dashboards serve as a crucial tool for managing and monitoring various aspects of a website or application. However, building an admin dashboard from scratch can be time-consuming and challenging too. To simplify this process, I have come up with an open source solution—an admin dashboard template built on HTML, CSS, Vanilla JavaScript, Tailwind CSS, and Vite.

AdminToolkit - is a modern admin dashboard template that comes with a variety of useful features and functionalities. It is built using TailwindCSS, a popular CSS framework that provides a simple and intuitive approach to building responsive UIs. The template includes over 50 pre-built pages, each designed with a focus on usability and user experience. These pages cover a wide range of use cases, including dashboards, analytics, products management, user management, invoice management and more.

Live Demo: https://www.getadmintoolkit.com/
Source Code: https://github.com/mostafizurhimself/admintoolkit-html

📌 Features

Based on Tailwindcss 3.x+
Light & Dark theme support
Auto-detect theme from user device preference
Pre-built UI components
Pre-built apps layout
50+ Pages
Responsive layout
Easily Customizable
Developer friendly
Organized codebase

If you like this project, star this project on Github. By starring the repository, you demonstrate your interest in the project and contribute to its visibility within the GitHub community. Your star helps us to gauge the level of interest and encourages others to discover and explore the template. Additionally, starring the project allows you to receive notifications about updates, new releases, and important announcements.

Conditional Props in React

Md Mostafizur Rahman — Sun, 16 Apr 2023 13:45:57 +0000

React.js is a popular JavaScript library used for building user interfaces. With its component-based architecture, React allows developers to easily create reusable UI components. In addition, TypeScript is a type-safe superset of JavaScript that helps developers catch errors early on during development. Combining React with TypeScript can lead to even more robust and error-free code. However, in this article, we will explore how to use conditional props in React.js with the help of TypeScript's discrimination union types.

What are Discrimination Union Types?

Discrimination union types are a type of union type that allows you to narrow down the set of possible values of a union based on a common property. In other words, discrimination union types allow you to define a type that depends on the value of a property. This feature is particularly useful when working with React components that have conditional props.

Example

Let's say we have a component called Input that can have two types of props: type="text" and type="number". We can define a union type that represents these two types of props as follows:

type InputProps = { type: 'text'; value: string } | { type: 'number'; value: number };

This defines a type called InputProps that is a union of two types: one with a type property that is a string with a value of text and a value property that is a string, and another with a type property that is a string with a value of number and a value property that is a number. We can use this type to define our Input component like this:

function Input(props: InputProps) {
  return (
    <input type={props.type} value={props.value} />
  );
}

Now, when we use this component, we can pass in either a type="text" or type="number" prop, and the value prop will be typed accordingly:

<Input type="text" value="Hello World" /> // Renders a text input with "Hello World" value
<Input type="number" value={42} /> // Renders a number input with "42" value
<Input type="text" value={42} /> // Error: 'value' must be a string for type='text'
<Input type="number" value="Hello World" // Error: 'value' must be a number for type='number'

Another Example

Let's say we have a component called PaymentMethod that can have two types of props: method="credit-card" and method="paypal". We can define a union type that represents these two types of props as follows:

type PaymentMethodProps =
  | { method: 'credit-card'; cardNumber: string; cvv: string }
  | { method: 'paypal'; email: string };

This defines a type called PaymentMethodProps that is a union of two types: one with a method property that is a string with a value of 'credit-card', a cardNumber property that is a string, and a cvv property that is a string. The other type has a method property that is a string with a value of 'paypal' and an email property that is a string. We can use this type to define our PaymentMethod component like this:

function PaymentMethod(props: PaymentMethodProps) {
  return (
    <div>
      {props.method === 'credit-card' && (
        <>
          <label>Card Number:</label>
          <input type="text" value={props.cardNumber} />
          <label>CVV:</label>
          <input type="text" value={props.cvv} />
        </>
      )}
      {props.method === 'paypal' && (
        <>
          <label>Email:</label>
          <input type="email" value={props.email} />
        </>
      )}
    </div>
  );
}

Now, when we use this component, we can pass in either a method="credit-card" or method="paypal" prop, but not both. Additionally, if method="credit-card", then cardNumber and cvv props must be present, and if method="paypal", then email prop must be present:

<PaymentMethod method="credit-card" cardNumber="1234567890123456" cvv="123" /> // Renders a credit card input form
<PaymentMethod method="paypal" email="example@example.com" /> // Renders a PayPal input form
<PaymentMethod method="credit-card" /> // Error: 'cardNumber' and 'cvv' must be present for method='credit-card'
<PaymentMethod method="paypal" cardNumber="1234567890123456" cvv="123" /> // Error: 'email' must be present for method='paypal'
<PaymentMethod method="credit-card" cardNumber="1234567890123456" cvv="123" email="example@example.com" /> // Error: Only one of 'cardNumber' and 'cvv', or 'email' is allowed

In this example, we defined a union type that represents two types of props that can be passed to the PaymentMethod component. We then used conditional rendering to show either the credit card input form or the PayPal input form based on the method prop value. Lastly, we added constraints to ensure that some props can't be present based on another prop's value.

Simplifying DTO Management In Express.js with Class-Transformer

Md Mostafizur Rahman — Sun, 05 Mar 2023 04:12:24 +0000

Data Transfer Objects (DTOs) are an essential concept in modern software development. They are used to transfer data between different layers of an application or between different applications. A DTO is a simple object that carries data between different layers of an application, such as between a client and a server. DTOs are often used to reduce the amount of data sent between the client and server and to provide a clear separation of concerns.

To make the process of managing DTOs easier, we can use the class-transformer library. Class-transformer is a TypeScript library that helps to convert plain JavaScript objects to class instances and vice versa. In this article, we will explore how to use class-transformer in Express.js to manage DTOs.

Installing Class-transformer

To get started, we need to install the class-transformer library. Open a terminal window and navigate to your project directory. Then run the following command:

npm install class-transformer

We also need to install reflect-metadata as it is a prerequisite of class-transformer library.

 npm install reflect-metadata

Creating a DTO Class

The first step in using class-transformer is to create a DTO class. A DTO class is a TypeScript class that represents the data we want to transfer between different layers of our application.

Here's an example of a simple DTO class that represents a user:

import { Expose } from 'class-transformer';

export class UserDTO {
  @Expose()
  firstName!: string;

  @Expose()
  lastName!: string;

  @Expose()
  email!: string;

  @Expose()
  age!: number;

  @Exclude()
  password!: string;
}

In the example above, we've defined a DTO class called UserDTO that has five properties: firstName, lastName, email, age and password. We've also used the Expose decorator from class-transformer to specify that each property should be included and Exclude decorator to specify that the property should not be included when we convert an instance of this class to a plain JavaScript object.

Converting an Object to a DTO

To convert an object to a DTO, we can simply create an instance of the DTO class and pass in the object as a parameter. Class-transformer will automatically map the object's properties to the corresponding properties in the DTO class.

Here's an example of how to convert an object to a UserDTO:

import { plainToClass } from 'class-transformer';
import { UserDTO } from './user.dto';

const user = {
  firstName: 'John',
  lastName: 'Doe',
  email: 'johndoe@example.com',
  age: 30,
  password: "secretpass", 
  confirmPassword: "secretpass"
};

const userDTO = plainToClass(UserDTO, user, { excludeExtraneousValues: true });
console.log(userDTO);

In the example above, we've created an object called user that represents a user. We've then used the plainToClass function from class-transformer to convert the user object to a UserDTO instance. Finally, we've logged the UserDTO instance to the console.

Converting request bodies

One of the most common use cases for class-transformer is converting request bodies. When we receive data from an API client, it usually comes in the form of a JSON object. We can use class-transformer to convert this JSON object to an instance of our DTO class.

import { plainToClass } from 'class-transformer';
import { Request, Response } from 'express';
import { UserDTO } from './dto/user.dto';

app.post('/users', async (req: Request, res: Response) => {
  const userDTO = plainToClass(UserDTO, req.body. { excludeExtraneousValues: true });

  // Create user in database...
});

Converting API responses

We can also useclass-transformer to convert API responses and provide the specific shape of data which the API client needs. Here is an example of how we can do this:

export class UserResponseDTO{
  @Expose()
  firstName!: string;

  @Expose()
  lastName!: string;

  @Expose()
  email!: string;

  @Expose()
  age!: number;

  @Expose({ name: 'fullName' })
  getFullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

app.get('/users/:id', async (req, res) => {
  const id = req.params.id;
  const user = UserModel.findById(id); // full user object
    const userResponseDTO = plainToClass(UserDTO, req.body. { excludeExtraneousValues: true });
  res.json(userResponseDTO);
});

Here the response will be like this:

{
 firstName: "Mostafizur",
 lastName: "Rahman",
 email: "mostafizur@example.com",
 age: "27",
 fullName: "Mostafizur Rahman"
}

Converting a DTO to an Object

To convert a DTO to an object, we can use classToPlain function from class-transformer to convert the a UserDTO instance to a user object. Class-transformer will automatically convert the DTO instance to a plain JavaScript object.

Here's an example of how to convert a UserDTO instance to an object:

import { classToPlain } from 'class-transformer';
import { UserDTO } from './user.dto';

const userDTO = new UserDTO();
userDTO.firstName = 'John';
userDTO.lastName = 'Doe';
userDTO.email = 'johndoe@example.com';
userDTO.age = 30;

const user = classToPlain(userDTO);
console.log(user);

In the example above, we've created a UserDTO instance called userDTO. We've then set the values of its properties. Finally, we've logged the plain user object to the console.

Conclusion

Class-transformer is a powerful tool for managing data transfer objects. In this article I have shown an high level overview of the class-transformer library. To learn more about this library please checkout out their official documentation here.

How to make a Rating Component with React & Typescript

Md Mostafizur Rahman — Thu, 19 Jan 2023 09:28:40 +0000

Creating a custom rating component in React using Typescript looks like intimidating sometimes, but it's pretty simple to do. In this article, I will show you how to create a custom Rating component using React & Typescript step by step.

To start, you will need to create a new React project and make sure that TypeScript is set up. You can use create-react-app or vite to quickly set up a new project with TypeScript.

Once you have your project set up, create a new file for your rating component and name it like "Rating.tsx" and follow these steps one by one.

Step 1: Define the props for the component. We will use the following props to customize our components.

className: a className that can be passed to customize the styling of the component.
count: the number of stars to display in the rating.
value: the current value of the rating.
color: the color of the stars when they are not being hovered over or clicked on.
hoverColor: the color of the stars when they are being hovered over.
activeColor: the color of the stars when they are being clicked on.
size: the size of the stars in pixels.
edit: a boolean value that determines whether the rating can be edited by the user.
isHalf: a boolean value that determines whether the rating allows for half-star increments.
onChange: a callback function that is called when the rating is changed.
emptyIcon: an icon to be used for empty stars.
halfIcon: an icon to be used for half stars.
fullIcon: an icon to be used for full stars.

In your Rating.tsx file:

interface RatingProps {
  className?: string;
  count: number;
  value: number;
  color?: string;
  hoverColor?: string;
  activeColor?: string;
  size?: number;
  edit?: boolean;
  isHalf?: boolean;
  onChange?: (value: number) => void;
  emptyIcon?: React.ReactElement;
  halfIcon?: React.ReactElement;
  fullIcon?: React.ReactElement;
}

Step 2: Define the star icon components using svg. You can also use any icon library for that.

interface IconProps {
  size?: number;
  color?: string;
}

const FullStar = ({ size = 24, color = "#000000" }: IconProps) => {
  return (
    <div style={{ color: color }}>
      <svg height={size} viewBox="0 0 24 24">
        <path
          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
          fill="currentColor"
        />
        <path d="M0 0h24v24H0z" fill="none" />
      </svg>
    </div>
  );
};

const HalfStar = ({ size = 24, color = "#000000" }: IconProps) => {
  return (
    <div style={{ color: color }}>
      <svg height={size} viewBox="0 0 24 24">
        <path
          d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"
          fill="currentColor"
        />
        <path d="M0 0h24v24H0z" fill="none" />
      </svg>
    </div>
  );
};

const EmptyStar = ({ size = 24, color = "#000000" }: IconProps) => {
  return (
    <div style={{ color: color }}>
      <svg height={size} viewBox="0 0 24 24">
        <path
          d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"
          fill="currentColor"
        />
        <path d="M0 0h24v24H0z" fill="none" />
      </svg>
    </div>
  );
};

Step 4: Now, define the rating component, destruct the props with some default values.

const Rating: React.FC<RatingProps> = ({
  className,
  count,
  value,
  color = "#ffd700",
  hoverColor = "#ffc107",
  activeColor = "#ffc107",
  size = 30,
  edit = false,
  isHalf = true,
  onChange,
  emptyIcon = <EmptyStar />,
  halfIcon = <HalfStar />,
  fullIcon = <FullStar />
}) => {
  return <div></div>
};

Step 5: Next, create a state for our rating component. This state will be used to track the current rating value selected by the user. We will also need to define some methods to update the state when the user interacts with the component.

const [hoverValue, setHoverValue] = useState<number | undefined>(undefined);

const handleMouseMove = (index: number) => {
  if (!edit) {
    return;
  }
  setHoverValue(index);
};

const handleMouseLeave = () => {
  if (!edit) {
    return;
  }
  setHoverValue(undefined);
};

const handleClick = (index: number) => {
  if (!edit) {
    return;
  }
  if (onChange) {
    onChange(index + 1);
  }
};

Step 6: Now we have the props and state set up, you can start rendering the stars for the rating component. For doing this, we will need to use a loop to render the number of stars specified by the count prop. Inside the loop, we need to check whether the current star should be empty, half or full. We should also add the onMouseEnter, onMouseLeave and onClick events along with the size and color to each of these star icon components.

 const stars = [];

  for (let i = 0; i < count; i++) {
    let star: React.ReactElement;
    if (isHalf && value - i > 0 && value - i < 1) {
      star = halfIcon;
    } else if (i < value) {
      star = fullIcon;
    } else {
      star = emptyIcon;
    }

    if (hoverValue !== undefined) {
      if (i <= hoverValue) {
        star = fullIcon;
      }
    }

    stars.push(
      <div
        key={i}
        style={{ cursor: "pointer" }}
        onMouseMove={() => handleMouseMove(i)}
        onMouseLeave={handleMouseLeave}
        onClick={() => handleClick(i)}
      >
        {React.cloneElement(star, {
          size: size,
          color: i <= Number(hoverValue) ? hoverColor : i < value ? activeColor : color,
        })}
      </div>
    );
  }

 return <div className={`rating ${className}`}>{stars}</div>;

Step 7: Finally, export the component so that it can be used in other parts of application. Here is an example use of our rating component:

import React from "react";
import Rating from "./Rating";

export default function App() {
  const [rating, setRating] = React.useState(0);

  return (
    <div className="App">
      <div>
        <h3>Editable</h3>
        <Rating
          count={5}
          value={rating}
          edit={true}
          onChange={(value) => setRating(value)}
        />
        <p>
          <b>Value: </b>
          {rating} stars
        </p>
      </div>
    </div>
  );
}

Check out a demo of this component in action by visiting this link CodeSandbox

Handle Axios Error in Typescript

Md Mostafizur Rahman — Fri, 23 Dec 2022 14:53:57 +0000

Let's imagine we are calling an API with axios within a try...catch block to get a list of posts. If the request is successful then we will get the response data, else we will get the error on our catch block

const fetchPosts = async () => {
  try {
    const response = await axios.get(
      "<https://jsonplaceholder.typicode.com/posts>"
    );
    // Do something with the response
  } catch (error) {
    // Need to handle this error
  }
};

But the problem is typescript assumes this error object as unknown type. So, typescript won't allow us to access any properties inside this error object.
To handle this situation, we can assert the error object type like this

import axios, {AxiosError} from "axios";

const fetchPosts = async () => {
  try {
    const response = await axios.get(
      "<https://jsonplaceholder.typicode.com/posts>"
    );
    // Do something with the response
  } catch (e) {
    const error = e as AxiosError;
    // Need to handle this error
  }
};

But the assertion is not a good practice and we should avoid doing this. By asserting type you are forcing the typescript to stop doing his work. So this may be problematic sometimes.

A Good Solution

We can use typeguard to handle this kind of situation and axios also provides a typeguard for handling errors. Here how it looks like

const fetchPosts = async () => {
  try {
    const response = await axios.get(
      "<https://jsonplaceholder.typicode.com/posts>"
    );
    // Do something with the response
  } catch (error) {
    if (axios.isAxiosError(error)) {
      console.log(error.status)
      console.error(error.response);
      // Do something with this error...
    } else {
      console.error(error);
    }
  }
};

We can also pass generic to type the error response and request object with this typeguard.

interface ValidationError {
  message: string;
  errors: Record<string, string[]>
}

const fetchPosts = async () => {
  try {
    const response = await axios.get(
      "<https://jsonplaceholder.typicode.com/posts>"
    );
    // Do something with the response
  } catch (error) {
    if (axios.isAxiosError<ValidationError, Record<string, unknown>>(error)) {
      console.log(error.status)
      console.error(error.response);
      // Do something with this error...
    } else {
      console.error(error);
    }
  }
};

N:B: You can also use this in a .catch() method.

To learn about more tips and tricks with typescript, follow me on LinkedIn