Creating an Expanding Search Component with React

In this tutorial, we'll guide you through creating an elegant expanding search component using React. This component is ideal for applications where space is limited, providing a sleek and user-friendly search function.

Creating the Component

Start by creating a new file called ExpandingSearch.js. This file will contain our search component:

import React, { useState } from "react";
import "./ExpandingSearch.css";

const ExpandingSearch = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleSearchClick = () => {
    setIsOpen(true);
  };

  const handleCloseClick = () => {
    setIsOpen(false);
  };

  return (
    <div className={`input-box ${isOpen ? "open" : ""}`}>
      <input type="text" placeholder="Search..." />
      <span className="search" onClick={handleSearchClick}>
       //search icon
        <svg
          className="search-icon"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M10 18a8 8 0 100-16 8 8 0 000 16zm7-3l5 5"
          />
        </svg>
      </span>
    //close icon
      <svg
        className="close-icon"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        onClick={handleCloseClick}
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M6 18L18 6M6 6l12 12"
        />
      </svg>
    </div>
  );
};

export default ExpandingSearch;

Styling the Component

Next, create a ExpandingSearch.css file to style our component:

.input-box {
  position: relative;
  width: 100%;
  max-width: 60px;
  height: 55px;
  margin: 0 50px;
  background-color: #fff;
  border-radius: 6px;
  transition: all 0.5s ease-in-out;
}

.input-box.open {
  max-width: 350px;
}

.input-box input {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  padding: 0 15px;
  border: none;
  border-radius: 6px;
  outline: none;
  transition: all 0.5s ease-in-out;
}

.input-box.open input {
  padding: 0 15px 0 65px;
}

.input-box .search {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.input-box.open .search {
  border-radius: 6px 0 0 6px;
}

.search .search-icon {
  width: 30px;
  height: 30px;
  color: #1c1c1c;
}

.input-box .close-icon {
  position: absolute;
  top: 50%;
  right: -45px;
  width: 30px;
  height: 30px;
  color: #faaf;
  padding: 5px;
  transform: translateY(-50%);
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
}

.input-box.open .close-icon {
  transform: translateY(-50%) rotate(180deg);
  pointer-events: auto;
  opacity: 1;
}

Integrating the Component

Integrate this component into your main application by importing it into your main file (e.g., App.js):

import React from "react";
import ExpandingSearch from "./ExpandingSearch";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <ExpandingSearch />
      </header>
    </div>
  );
}

export default App;

Conclusion

By following these steps, you can create a user-friendly expanding search component in React. This is just an example; feel free to customize it according to your preferences to better fit your application's needs.