Skip to main content

​
Overview

The CustomHeader component provides a centered page header with a title and optional description. It’s a shared component used across multiple projects for consistent page headers. Location: gifs-app/src/shared/components/CustomHeader.tsx

​
Props

​
title
string
required
The main heading text displayed in an <h1> tag
​
description
string
Optional description text displayed below the title in a <p> tag. Only rendered if provided.

​
Features

  • Minimal Design: Simple, focused component with no complex logic
  • Conditional Rendering: Description only renders when provided
  • Centered Layout: Uses content-center CSS class for alignment
  • TypeScript Support: Fully typed props interface
  • Semantic HTML: Uses proper heading hierarchy

​
Usage Example

import { CustomHeader } from './components/CustomHeader';

function App() {
  return (
    <div>
      <CustomHeader 
        title="GIFs Finder"
        description="Busca y descubre GIFs animados usando la API de Giphy"
      />
    </div>
  );
}

​
Implementation

interface Props {
  title: string;
  description?: string;
}

export const CustomHeader = ({ title, description }: Props) => {
  return (
    <div className="content-center">
      <h1>{title}</h1>
      {description && <p> {description}</p>}
    </div>
  );
};

​
TypeScript Interface

interface Props {
  title: string;        // Required: Main heading text
  description?: string; // Optional: Subtitle/description text
}

​
Component Design Pattern

This component demonstrates several React best practices:

​
1. Conditional Rendering

The description is only rendered when provided: 
{description && <p> {description}</p>}
This uses JavaScript’s short-circuit evaluation - if description is falsy (undefined, null, or empty string), the <p> tag is not rendered.

​
2. Optional Props

The ? in TypeScript makes the description prop optional: 
description?: string;
This allows the component to be used with or without a description.

​
3. Named Export

Uses named export for better tree-shaking and explicit imports: 
export const CustomHeader = ...

​
4. Prop Destructuring

Destructures props directly in the function parameters: 
({ title, description }: Props)

​
Common Use Cases

Use as the main header for application pages:
<CustomHeader 
  title="Dashboard"
  description="Welcome back! Here's your overview"
/>
Use to introduce major sections without description:
<CustomHeader title="User Settings" />
Use with longer descriptions for landing pages:
<CustomHeader 
  title="Welcome to React Mini Projects"
  description="A collection of simple, educational React applications demonstrating core concepts and patterns"
/>
Use to explain empty states in applications:
<CustomHeader 
  title="No Results Found"
  description="Try adjusting your search terms"
/>

​
Customization

​
Styling

The component uses a content-center CSS class, which you can customize: 
/* Custom theme */
.content-center {
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 3rem 1rem;
  border-radius: 8px;
}

.content-center h1 {
  color: white;
  font-weight: bold;
}

.content-center p {
  color: rgba(255, 255, 255, 0.9);
}

​
Extending the Component

You can extend this component with additional features: 
interface ExtendedProps extends Props {
  icon?: React.ReactNode;
  actions?: React.ReactNode;
}

export const ExtendedHeader = ({ 
  title, 
  description, 
  icon, 
  actions 
}: ExtendedProps) => {
  return (
    <div className="content-center">
      {icon && <div className="header-icon">{icon}</div>}
      <h1>{title}</h1>
      {description && <p>{description}</p>}
      {actions && <div className="header-actions">{actions}</div>}
    </div>
  );
};

​
Testing

The component has an associated test file at CustomHeader.test.tsx:1. Here’s an example test pattern: 
import { render, screen } from '@testing-library/react';
import { CustomHeader } from './CustomHeader';

describe('CustomHeader', () => {
  it('renders title', () => {
    render(<CustomHeader title="Test Title" />);
    expect(screen.getByText('Test Title')).toBeInTheDocument();
  });

  it('renders description when provided', () => {
    render(
      <CustomHeader 
        title="Test" 
        description="Test Description" 
      />
    );
    expect(screen.getByText('Test Description')).toBeInTheDocument();
  });

  it('does not render description when not provided', () => {
    render(<CustomHeader title="Test" />);
    const description = screen.queryByRole('paragraph');
    expect(description).not.toBeInTheDocument();
  });
});

SearchBar

Often used directly below CustomHeader

Component Overview

See all available components

​
Best Practices

Keep titles concise and descriptive (2-5 words)
Use descriptions to provide context or instructions
Ensure the component hierarchy uses h1 only once per page
Consider responsive font sizes for mobile devices
Use semantic HTML for better SEO and accessibility

Build docs developers (and LLMs) love

Get started for freeTalk to us