Creating Reusable Components in React with TypeScript and Storybook

In today's fast-paced development environment, creating reusable components is essential for enhancing productivity and maintaining code quality. React, combined with TypeScript and Storybook, provides a powerful toolkit for building scalable and maintainable user interfaces. This article will guide you through the process of creating reusable components using these technologies, complete with code examples and actionable insights.

What Are Reusable Components?

Reusable components are modular pieces of code that can be used across various parts of an application, promoting consistency and reducing redundancy. They encapsulate specific functionality and presentation, allowing developers to create complex UIs from simple building blocks.

Benefits of Reusable Components

• Consistency: Ensures a uniform look and feel across the application.
• Efficiency: Reduces the time spent on coding and testing similar functionalities.
• Scalability: Makes it easier to maintain and update the application.
• Collaboration: Streamlines the development process, allowing multiple developers to work on different components simultaneously.

Setting Up Your Environment

Before diving into code, ensure you have the following tools installed:

1. Node.js: Make sure you have Node.js installed on your machine. You can download it from Node.js official site.
2. Create React App: Use Create React App to bootstrap your React project.

bash npx create-react-app my-app --template typescript cd my-app

1. Install Storybook: Storybook is a tool for developing UI components in isolation.

bash npx sb init

Project Structure

After setting up, your project structure should look something like this:

my-app/
├── src/
│   ├── components/
│   │   └── Button/
│   │       ├── Button.tsx
│   │       ├── Button.stories.tsx
│   │       ├── Button.test.tsx
│   │       └── Button.css
│   └── App.tsx
└── ...

Creating a Reusable Button Component

Now, let's create a simple Button component that can be reused throughout our application.

Step 1: Define Your Button Component

Create a new file called Button.tsx inside the Button folder.

import React from 'react';
import './Button.css';

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

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

export default Button;

Step 2: Style Your Button

Create a Button.css file for styling the button.

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.btn:hover:not(:disabled) {
  background-color: #0056b3;
}

Step 3: Create Storybook Stories

Next, we’ll create stories for our Button component to showcase its various states. Create a new file named Button.stories.tsx.

import React from 'react';
import Button from './Button';

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

const Template = (args) => <Button {...args} />;

export const Default = Template.bind({});
Default.args = {
  label: 'Click Me',
  onClick: () => alert('Button clicked!'),
};

export const Disabled = Template.bind({});
Disabled.args = {
  label: 'Disabled',
  onClick: () => {},
  disabled: true,
};

Step 4: Run Storybook

Start Storybook to visualize your component in isolation.

npm run storybook

Open your browser and navigate to http://localhost:6006 to view your Button component in action.

Testing Your Component

To ensure your components work as expected, you should also add tests. Create a file named Button.test.tsx:

import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

test('renders button with label', () => {
  render(<Button label="Click Me" onClick={() => {}} />);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

test('calls onClick when clicked', () => {
  const handleClick = jest.fn();
  render(<Button label="Click Me" onClick={handleClick} />);
  const buttonElement = screen.getByText(/Click Me/i);
  fireEvent.click(buttonElement);
  expect(handleClick).toHaveBeenCalledTimes(1);
});

test('renders disabled button', () => {
  render(<Button label="Disabled" onClick={() => {}} disabled />);
  const buttonElement = screen.getByText(/Disabled/i);
  expect(buttonElement).toBeDisabled();
});

Conclusion

Creating reusable components in React with TypeScript and Storybook not only enhances code quality but also promotes a more efficient development workflow. By following the steps outlined in this article, you can build a robust UI component library that is easy to maintain and scale.

Key Takeaways

• Use TypeScript for type safety and better development experience.
• Leverage Storybook for developing and documenting your components in isolation.
• Test your components to ensure reliability and functionality.

By adopting these practices, you will not only improve your current project but also set a strong foundation for future development endeavors. Happy coding!