Understanding React Component Exports and TypeScript Conversion: A Case Study with a WhatsApp Chat Button

Introduction

React developers often encounter the choice between named exports and default exports when organizing their components. Additionally, transitioning from JavaScript to TypeScript improves type safety and maintainability. In this blog, I'll explore these concepts using a practical example: a WhatsApp chat button that provides users with a direct link to WhatsApp support.

The Work: Building a WhatsApp Chat Component

I started with a JavaScript-based WhatsAppChat.jsx component and converted it to TypeScript (WhatsAppChat.tsx). The component displays a floating WhatsApp button with a tooltip that appears on hover. Clicking the button opens a WhatsApp chat with a predefined phone number.

Original JavaScript Implementation (WhatsAppChat.jsx)

import React, { useState } from 'react';

export default function WhatsAppChat() {
  const [showTooltip, setShowTooltip] = useState(false);
  const whatsappNumber = '1234567890'; // Replace with actual WhatsApp number
  const whatsappLink = `https://wa.me/${whatsappNumber}`;

  return (
    <div className="relative">
      <a
        href={whatsappLink}
        target="_blank"
        rel="noopener noreferrer"
        className="fixed bottom-8 right-8 bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition-colors duration-200 z-50"
        aria-label="Chat on WhatsApp"
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
      >
        <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967..."/>
        </svg>
      </a>
      {showTooltip && (
        <div className="fixed bottom-24 right-8 bg-white px-4 py-2 rounded-lg shadow-lg z-50 animate-fade-in">
          <p className="text-gray-800 whitespace-nowrap">Need help? Chat with us on WhatsApp</p>
        </div>
      )}
    </div>
  );
}

The Process: Converting to TypeScript

To enhance maintainability, we converted the JavaScript component to TypeScript by:

1. Adding explicit type annotations for state and variables.
2. Using React.FC to enforce component structure.
3. Choosing between named and default exports.

Final TypeScript Implementation (WhatsAppChat.tsx)

import React, { useState } from "react";

export const WhatsAppChat: React.FC = () => {
  const [showTooltip, setShowTooltip] = useState<boolean>(false);
  const whatsappNumber: string = "07031118649";
  const whatsappLink: string = `https://wa.me/${whatsappNumber}`;

  return (
    <div className="relative">
      <a
        href={whatsappLink}
        target="_blank"
        rel="noopener noreferrer"
        className="fixed bottom-8 right-8 bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition-colors duration-200 z-50"
        aria-label="Chat on WhatsApp"
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
      >
        <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967..."/>
        </svg>
      </a>
      {showTooltip && (
        <div className="fixed bottom-24 right-8 bg-white px-4 py-2 rounded-lg shadow-lg z-50 animate-fade-in">
          <p className="text-gray-800 whitespace-nowrap">Need help? Chat with us on WhatsApp</p>
        </div>
      )}
    </div>
  );
};

Concepts Explained

1️⃣ Named vs. Default Exports

• Named Export (export const WhatsAppChat)

  • Can export multiple functions/components from the same file.
  • Must be imported using destructuring:

  import { WhatsAppChat } from "./WhatsAppChat";
  

• Default Export (export default WhatsAppChat)

  • Allows exporting only one component per file.
  • Can be imported without destructuring:

  import WhatsAppChat from "./WhatsAppChat";
  

  • Useful for modules that have a single primary export.

2️⃣ TypeScript Benefits in React

• Type Safety: Prevents errors by enforcing data types.
• Better Code Readability: Easier for teams to understand.
• Enhanced IntelliSense & Autocomplete: Improves developer productivity.
• Scalability: Ideal for large React projects.

3️⃣ Using React.FC in TypeScript

• React.FC ensures the function follows React’s component structure.
• It provides built-in support for children props.

4️⃣ Strongly Typed State with useState

Instead of useState(false), we explicitly declare the type:

const [showTooltip, setShowTooltip] = useState<boolean>(false);

This ensures showTooltip is always a boolean, preventing unintended data assignments.

The Results: Improved Code Maintainability & Type Safety

After converting to TypeScript, our component:

• Became more reliable and self-documenting.
• Allowed early error detection during development.
• Enabled scalable component reuse in larger projects.

Conclusion

Converting a React component from JavaScript to TypeScript improves code quality, maintainability, and developer experience. Additionally, understanding named vs. default exports helps in structuring React applications effectively.

Day 1 of #60daysofcode