SearchBar

Overview

SearchBar is a controlled input component that allows users to search for movies. It provides a text input field with a search icon and placeholder text.

Import

import SearchBar from '../components/SearchBar';

Props

searchTerm

string

required

Current value of the search input (controlled component pattern)

onSearchChange

function

required

Callback function invoked when the input value changesSignature: (value: string) => voidParameters:

value (string): The new search term entered by the user

Component Signature

const SearchBar = ({ searchTerm, onSearchChange }) => { ... }

Features

Controlled Input

The component follows React’s controlled component pattern:

<input
  type="text"
  className="search-bar__input"
  placeholder="Buscar películas por título, director o actor..."
  value={searchTerm}
  onChange={(e) => onSearchChange(e.target.value)}
/>

Search Icon

Includes a visual search icon (magnifying glass emoji) for better UX:

<span className="search-bar__icon">🔍</span>

Usage Example

With usePeliculaSearch Hook
With Local State

import React from 'react';
import SearchBar from '../components/SearchBar';
import usePeliculaSearch from '../hooks/usePeliculaSearch';

const PeliculasPage = () => {
  const { searchTerm, setSearchTerm } = usePeliculaSearch();

  return (
    <div>
      <SearchBar 
        searchTerm={searchTerm} 
        onSearchChange={setSearchTerm} 
      />
    </div>
  );
};

import React, { useState } from 'react';
import SearchBar from '../components/SearchBar';

const CustomSearch = () => {
  const [query, setQuery] = useState('');

  const handleSearch = (value) => {
    setQuery(value);
    console.log('Searching for:', value);
  };

  return (
    <SearchBar 
      searchTerm={query} 
      onSearchChange={handleSearch} 
    />
  );
};

Rendered Structure

<div className="search-bar">
  <input
    type="text"
    className="search-bar__input"
    placeholder="Buscar películas por título, director o actor..."
    value={searchTerm}
    onChange={(e) => onSearchChange(e.target.value)}
  />
  <span className="search-bar__icon">🔍</span>
</div>

CSS Classes

.search-bar - Container div
.search-bar__input - Text input element
.search-bar__icon - Search icon span

Accessibility

Uses semantic <input type="text"> element
Includes descriptive placeholder text
Keyboard accessible by default

Integration Notes

When used with usePeliculaSearch, the search term filters movies by:

Movie title (case-insensitive)
Director name (case-insensitive)
Cast member names (case-insensitive)

Filtering is debounced with a 300ms delay in the hook.

Source Location

src/components/SearchBar.jsx:3

Hooks

Components

Data

Overview

Import

Props

Component Signature

Features

Controlled Input

Search Icon

Usage Example

Rendered Structure

CSS Classes

Accessibility

Integration Notes

Source Location

Build docs developers (and LLMs) love

Hooks

Components

Data

​Overview

​Import

​Props

​Component Signature

​Features

​Controlled Input

​Search Icon

​Usage Example

​Rendered Structure

​CSS Classes

​Accessibility

​Integration Notes

​Source Location

Build docs developers (and LLMs) love

Overview

Import

Props

Component Signature

Features

Controlled Input

Search Icon

Usage Example

Rendered Structure

CSS Classes

Accessibility

Integration Notes

Source Location