Crafting Reusable UI Components in TypeScript for Any Framework

Hi there! I'm Shrijith Venkatrama, founder of Hexmos. Right now, I’m building LiveAPI, a first of its kind tool for helping you automatically index API endpoints across all your repositories. LiveAPI helps you discover, understand and use APIs in large tech infrastructures with ease.

Reusable UI components are the backbone of modern web development. Writing them in TypeScript lets you create clean, type-safe code that works across frameworks like React, Vue, and Angular. This post dives into how to build these components, with practical examples and tips to make them flexible and maintainable. We'll focus on real-world use cases, complete code snippets, and a structure that plays nice with multiple frameworks.

Why Multi-Framework Components Matter

Building components that work across frameworks saves time and reduces duplication. TypeScript's strong typing ensures your components are predictable and easier to debug, no matter where they're used. The goal is to write a single component that can be dropped into React, Vue, or Angular with minimal tweaks. This approach is especially useful for teams working on multiple projects or maintaining a design system.

Key benefits:

• Consistency: Same behavior and styling across frameworks.
• Maintainability: One codebase to update.
• Scalability: Easier to integrate into new projects.

Let’s explore how to make this happen.

Setting Up a TypeScript Component Foundation

Start with a solid base. A reusable component needs a clear structure: a TypeScript interface for props, a render-agnostic logic layer, and framework-specific adapters. This keeps the core logic independent while allowing flexibility for rendering.

Here’s a simple button component’s TypeScript interface:

// button.ts
export interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary' | 'danger';
  className?: string;
}

Why this works: The interface defines a contract for the button’s props, ensuring type safety across frameworks. The variant prop allows styling flexibility, while className supports custom CSS.

To keep things framework-agnostic, separate the logic (e.g., click handling) from the rendering. We’ll build this button’s logic in a plain TypeScript class:

// button-logic.ts
export class ButtonLogic {
  constructor(private props: ButtonProps) {}

  handleClick() {
    if (!this.props.disabled) {
      this.props.onClick();
    }
  }

  getClasses(): string {
    const baseClasses = 'px-4 py-2 rounded';
    const variantClasses = {
      primary: 'bg-blue-500 text-white',
      secondary: 'bg-gray-500 text-white',
      danger: 'bg-red-500 text-white',
    };
    return `${baseClasses} ${variantClasses[this.props.variant || 'primary']} ${this.props.className || ''}`;
  }
}

Output: The getClasses method returns a string like px-4 py-2 rounded bg-blue-500 text-white for a primary button.

This logic is framework-agnostic and can be consumed by any UI library. Let’s see how to integrate it.

Building a React Adapter

React is component-driven, so integrating our button is straightforward. Create a React component that uses the ButtonLogic class:

// button-react.tsx
import React from 'react';
import { ButtonProps, ButtonLogic } from './button-logic';

export const Button: React.FC<ButtonProps> = (props) => {
  const logic = new ButtonLogic(props);

  return (
    <button
      className={logic.getClasses()}
      onClick={() => logic.handleClick()}
      disabled={props.disabled}
    >
      {props.label}
    </button>
  );
};

// Example usage
const App: React.FC = () => (
  <Button
    label="Click Me"
    onClick={() => alert('Clicked!')}
    variant="primary"
  />
);

Output: Renders a styled button with Tailwind CSS classes. Clicking it triggers an alert unless disabled.

Why this works: The React component delegates logic to ButtonLogic, keeping the rendering layer thin. This makes it easy to swap out React for another framework. For styling, we’re using Tailwind CSS (via CDN in a real app), but you can use any CSS solution.

React TypeScript Docs for more on TypeScript with React.

Creating a Vue Adapter

Vue’s composition API pairs well with our setup. Here’s how to adapt the same button for Vue:

// button-vue.ts
import { defineComponent } from 'vue';
import { ButtonProps, ButtonLogic } from './button-logic';

export default defineComponent({
  name: 'Button',
  props: {
    label: String,
    onClick: Function,
    disabled: Boolean,
    variant: String,
    className: String,
  },
  setup(props: ButtonProps) {
    const logic = new ButtonLogic(props);

    return () => (
      <button
        class={logic.getClasses()}
        onClick={() => logic.handleClick()}
        disabled={props.disabled}
      >
        {props.label}
      </button>
    );
  },
});

// Example usage in a Vue app
/*
<template>
  <Button label="Click Me" variant="primary" @click="handleClick" />
</template>

<script lang="ts">
import Button from './button-vue';
export default {
  components: { Button },
  methods: {
    handleClick() {
      alert('Clicked!');
    },
  },
};
</script>
*/

Output: Renders a button identical to the React version, with the same styling and behavior.

Why this works: Vue’s JSX support (via @vitejs/plugin-vue-jsx) lets us reuse the same logic class. The props align with our ButtonProps interface, ensuring type safety.

Vue TypeScript Guide for deeper Vue-TypeScript integration.

Supporting Angular

Angular’s component model is a bit more verbose, but the same ButtonLogic class fits nicely:

// button.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ButtonProps, ButtonLogic } from './button-logic';

@Component({
  selector: 'app-button',
  template: `
    <button
      [class]="logic.getClasses()"
      [disabled]="disabled"
      (click)="logic.handleClick()"
    >
      {{ label }}
    </button>
  `,
})
export class ButtonComponent implements ButtonProps {
  @Input() label: string = '';
  @Input() disabled?: boolean;
  @Input() variant?: 'primary' | 'secondary' | 'danger';
  @Input() className?: string;
  @Output() onClick = new EventEmitter<void>();

  logic: ButtonLogic;

  constructor() {
    this.logic = new ButtonLogic(this);
  }
}

// Example usage
/*
<app-button
  label="Click Me"
  variant="primary"
  (onClick)="handleClick()"
></app-button>

handleClick() {
  alert('Clicked!');
}
*/

Output: A button with the same styles and behavior as in React and Vue.

Why this works: Angular’s input/output bindings map to our ButtonProps interface. The ButtonLogic class handles the heavy lifting, keeping the component lean.

Angular TypeScript Docs for more on Angular with TypeScript.

Handling Component Variants with a Configuration Table

To make components flexible, use a configuration table for variants. This centralizes styling and behavior logic, making it easier to extend. Here’s an example for our button:

Update the ButtonLogic class to include hover effects:

// button-logic.ts (updated)
export class ButtonLogic {
  constructor(private props: ButtonProps) {}

  handleClick() {
    if (!this.props.disabled) {
      this.props.onClick();
    }
  }

  getClasses(): string {
    const baseClasses = 'px-4 py-2 rounded transition';
    const variantClasses = {
      primary: 'bg-blue-500 text-white hover:bg-blue-600',
      secondary: 'bg-gray-500 text-white hover:bg-gray-600',
      danger: 'bg-red-500 text-white hover:bg-red-600',
    };
    return `${baseClasses} ${variantClasses[this.props.variant || 'primary']} ${this.props.className || ''}`;
  }
}

Output: Adds hover effects like bg-blue-600 when hovering over a primary button.

Why this works: The table makes it easy to visualize and extend variants. Adding a new variant (e.g., success) just means updating the table and variantClasses object.

Testing Components Across Frameworks

Testing ensures your component behaves consistently. Use a shared test suite with a library like Jest to test the ButtonLogic class, then framework-specific tests for rendering.

Here’s a Jest test for ButtonLogic:

// button-logic.test.ts
import { ButtonLogic } from './button-logic';

describe('ButtonLogic', () => {
  it('should return correct classes for primary variant', () => {
    const props = { label: 'Test', onClick: jest.fn(), variant: 'primary' };
    const logic = new ButtonLogic(props);
    expect(logic.getClasses()).toContain('bg-blue-500');
  });

  it('should not call onClick when disabled', () => {
    const onClick = jest.fn();
    const props = { label: 'Test', onClick, disabled: true };
    const logic = new ButtonLogic(props);
    logic.handleClick();
    expect(onClick).not.toHaveBeenCalled();
  });
});

Output: Tests pass if classes include bg-blue-500 and onClick isn’t called when disabled.

For framework-specific tests, use tools like React Testing Library, Vue Test Utils, or Angular TestBed. This ensures rendering works as expected.

Jest Documentation for setting up tests.

Managing Props and State Effectively

Props and state can get tricky when supporting multiple frameworks. Stick to a minimal props interface and avoid framework-specific state management. For complex components, consider a state machine (e.g., XState) to handle state transitions agnostically.

For our button, the disabled prop controls state. If you need more complex state (e.g., a loading spinner), extend the ButtonProps interface:

// button.ts (updated)
export interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary' | 'danger';
  className?: string;
  isLoading?: boolean;
}

Update the ButtonLogic class:

// button-logic.ts (updated)
export class ButtonLogic {
  constructor(private props: ButtonProps) {}

  handleClick() {
    if (!this.props.disabled && !this.props.isLoading) {
      this.props.onClick();
    }
  }

  getClasses(): string {
    const baseClasses = 'px-4 py-2 rounded transition';
    const variantClasses = {
      primary: 'bg-blue-500 text-white hover:bg-blue-600',
      secondary: 'bg-gray-500 text-white hover:bg-gray-600',
      danger: 'bg-red-500 text-white hover:bg-red-600',
    };
    const loadingClass = this.props.isLoading ? 'opacity-50 cursor-not-allowed' : '';
    return `${baseClasses} ${variantClasses[this.props.variant || 'primary']} ${loadingClass} ${this.props.className || ''}`;
  }
}

Output: Adds opacity-50 cursor-not-allowed when isLoading is true.

Why this works: The isLoading prop keeps state simple and framework-agnostic. Each framework can pass this prop without changing the core logic.

XState Documentation for advanced state management.

Tips for Scaling to a Design System

To scale your components into a design system:

• Centralize logic: Keep ButtonLogic-style classes in a shared library.
• Use a monorepo: Tools like Nx or Turborepo help manage shared code across frameworks.
• Document props: Use tools like Storybook to showcase components and their props.
• Enforce typing: TypeScript’s interfaces ensure consistency.

Here’s a sample Storybook story for the button:

// button.stories.tsx
import React from 'react';
import { Button } from './button-react';

export default {
  title: 'Components/Button',
  component: Button,
};

export const Primary = () => <Button label="Primary Button" onClick={() => {}} variant="primary" />;
export const Disabled = () => <Button label="Disabled Button" onClick={() => {}} disabled />;

Output: Renders interactive button examples in Storybook.

This setup makes it easy to share components across teams and projects.

Storybook Documentation for building design systems.

Moving Forward with Reusable Components

Building multi-framework UI components in TypeScript is about separating logic from rendering and leveraging type safety. By creating a shared logic layer, you can plug components into React, Vue, Angular, or even newer frameworks with minimal changes. Use tables to manage variants, test thoroughly, and consider tools like Storybook for documentation. Start small with a component like our button, then scale to a full design system. The key is to keep your code DRY, type-safe, and adaptable.