How do I design a reusable component in TypeScript with React?

How do I design a reusable component in TypeScript with React?

To design a reusable component in TypeScript with React, start by defining the component's props interface. This ensures type safety.

Can you give me an example of a simple button component?

Sure! Here's a basic example:

import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;

How can I add styles to this button component?

You can add styles by using CSS modules or styled-components. For example, using inline styles:

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button style={{ backgroundColor: 'blue', color: 'white' }} onClick={onClick}>{label}</button>;
};

What if I want to make the button disabled?

You can add a disabled prop to your ButtonProps interface and conditionally render the button:

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ label, onClick, disabled }) => {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
};