Créer une barre de recherche animée avec React

Dans ce tutoriel, nous allons créer une barre de recherche interactive avec suggestions et animation d'entrée pour les résultats en utilisant React et Framer Motion.

1. Installer les dépendances

Avant de commencer, assurez-vous d'avoir React configuré. Ensuite, installez les bibliothèques nécessaires :

npm install framer-motion lucide-react

2. Structure de base du composant

Voici le squelette de notre composant SearchBar :

"use client";
import React, { useState } from "react";
import { Search } from "lucide-react";
import { motion } from "framer-motion";

const SearchBar = () => {
  const data = [
    "Abricot",
    "Artichaut",
    "Banane",
    "Brocoli",
    "Cerise",
    "Chou",
    "Datte",
    "Dinde",
  ];

  const [query, setQuery] = useState("");
  const [filteredData, setFilteredData] = useState([]);
  const [selectedItems, setSelectedItems] = useState([]);

  // Filtre les données en fonction de l'entrée utilisateur
  const filterData = (input) => {
    return data.filter((item) =>
      item.toLowerCase().startsWith(input.trim().toLowerCase()),
    );
  };

  // Gère le changement de valeur dans le champ de recherche
  const handleInputChange = (e) => {
    const value = e.target.value;
    setQuery(value);

    setFilteredData(value.trim() === "" ? [] : filterData(value));
  };

  // Gère le clic sur une suggestion
  const handleSuggestionClick = (suggestion) => {
    setQuery(suggestion);
    setFilteredData([]);
    setSelectedItems(filterData(suggestion));
  };

  // Gère le clic sur le bouton Rechercher
  const handleSearchClick = () => {
    setSelectedItems(query.trim() !== "" ? filterData(query) : []);
    setFilteredData([]);
  };

  return (
    <section className="relative mx-auto flex h-[500px] w-full max-w-md flex-col gap-2">
      <div className="flex gap-2">
        {/* Champ de recherche */}
        <div className="flex h-10 w-[250px] items-center rounded-lg border border-gray-300 bg-white shadow-sm">
          <input
            type="text"
            value={query}
            onChange={handleInputChange}
            placeholder="Rechercher..."
            className="h-full w-[250px] rounded-lg px-4 focus:outline-none focus:ring-2 focus:ring-blue-400"
          />
        </div>

        {/* Bouton Rechercher */}
        <div className="h-10 text-center">
          <button
            type="button"
            onClick={handleSearchClick}
            className="flex h-full items-center justify-center gap-2 rounded-md bg-blue-500 px-4 text-white hover:bg-blue-600"
          >
            <Search className="h-5 w-5" />
            Rechercher
          </button>
        </div>
      </div>

      {/* Liste des suggestions */}
      {filteredData.length > 0 && (
        <ul className="absolute z-10 mt-11 w-[250px] rounded-md border border-gray-200 bg-white shadow-lg">
          {filteredData.map((item, index) => (
            <li
              key={index}
              onClick={() => handleSuggestionClick(item)}
              className="cursor-pointer px-4 py-2 hover:bg-gray-100"
            >
              {item}
            </li>
          ))}
        </ul>
      )}

      {/* Affichage des cartes sélectionnées */}
      {selectedItems.length > 0 && (
        <div className="mt-4 grid grid-cols-1 gap-4">
          {selectedItems.map((item, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: index * 0.1 }}
              className="rounded-md border bg-gray-100 p-4 shadow-lg"
            >
              <h3 className="text-lg font-semibold">{item}</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque,
                officiis debitis repellat aspernatur eligendi fugiat dolorum
                accusamus maiores quae labore odio ex, obcaecati nobis velit
                sapiente vel aut praesentium? Dolore!
              </p>
            </motion.div>
          ))}
        </div>
      )}
    </section>
  );
};

export default SearchBar;

3. Fonctionnement

Recherche avec suggestions :

L'utilisateur tape un mot-clé dans le champ de recherche.
Les suggestions correspondantes s'affichent dans une liste.
L'utilisateur peut cliquer sur une suggestion pour la sélectionner.

Affichage des résultats avec animation :

Lorsqu'un élément est sélectionné, il est affiché dans une carte animée (grâce à Framer Motion).
Chaque carte entre avec une transition fluide.

4. Animation avec Framer Motion

Framer Motion facilite l'ajout d'animations à React. Ici, chaque résultat a une animation simple d'apparition :

Initial state : opacity: 0, y: 20
Final state : opacity: 1, y: 0
Delay : Chaque carte a un léger décalage pour un effet séquentiel.

Conclusion

En quelques étapes simples, nous avons créé une barre de recherche interactive qui affiche des suggestions dynamiques et des cartes animées pour chaque élément sélectionné. Cette méthode améliore l'expérience utilisateur avec une interface fluide et réactive.