@metadiv-studio/searchbar

A modern, collapsible search bar component for React applications with smooth animations and dark mode support. Built with TypeScript and Tailwind CSS.

📦 Installation

npm install @metadiv-studio/searchbar

🎨 Tailwind CSS Configuration

Important: To use this package's Tailwind CSS styles, you must add the following path to your tailwind.config.js or tailwind.config.ts file:

// tailwind.config.js
module.exports = {
  content: [
    // ... other content paths
    "./node_modules/@metadiv-studio/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of config
}

This ensures that Tailwind can scan your package's components and include the necessary CSS classes in the final build.

🚀 Quick Start

import React, { useState } from 'react';
import { Searchbar } from '@metadiv-studio/searchbar';

function App() {
  const [search, setSearch] = useState('');

  return (
    <div className="p-4">
      <Searchbar search={search} setSearch={setSearch} />
    </div>
  );
}

📋 Props Documentation

Required Props

search: string

The current search value. This prop controls the input field's value.

Example:

const [search, setSearch] = useState('');

<Searchbar 
  search={search} 
  setSearch={setSearch} 
/>

setSearch: (search: string) => void

A function to update the search value. This function is called whenever the user types in the input field or clears the search.

Example:

const handleSearchChange = (newSearch: string) => {
  setSearch(newSearch);
  // Additional logic like API calls, filtering, etc.
};

<Searchbar 
  search={search} 
  setSearch={handleSearchChange} 
/>

🎯 Features

• Collapsible Design: Click the search icon to expand/collapse the search input
• Smooth Animations: CSS transitions for a polished user experience
• Clear Functionality: X button to clear the search and collapse the input
• Auto-collapse: Automatically collapses when the search field is empty and loses focus
• Dark Mode Support: Compatible with dark mode themes
• Responsive: Adapts to different screen sizes
• Accessible: Built with accessibility in mind using semantic HTML

🎨 Styling

The component uses Tailwind CSS classes and is designed to be flexible. The main container uses:

• flex grow justify-end for positioning
• max-w-64 for maximum width
• transition-all duration-300 for smooth animations

🔧 Advanced Usage

Custom Styling

You can wrap the Searchbar in a container with custom styling:

<div className="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
  <Searchbar search={search} setSearch={setSearch} />
</div>

Integration with Search Logic

import React, { useState, useEffect } from 'react';
import { Searchbar } from '@metadiv-studio/searchbar';

function SearchComponent() {
  const [search, setSearch] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    // Debounce search to avoid too many API calls
    const timeoutId = setTimeout(() => {
      if (search.trim()) {
        performSearch(search);
      } else {
        setResults([]);
      }
    }, 300);

    return () => clearTimeout(timeoutId);
  }, [search]);

  const performSearch = async (query: string) => {
    // Your search logic here
    const searchResults = await fetchSearchResults(query);
    setResults(searchResults);
  };

  return (
    <div>
      <Searchbar search={search} setSearch={setSearch} />
      <div className="mt-4">
        {results.map((result) => (
          <div key={result.id}>{result.title}</div>
        ))}
      </div>
    </div>
  );
}

📦 Dependencies

This package has the following peer dependencies:

• react ^18
• react-dom ^18

And requires these packages:

• @metadiv-studio/button ^0.11.4
• @metadiv-studio/input ^0.3.2
• @metadiv-studio/translation ^0.3.0
• lucide-react ^0.539.0

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the UNLICENSE - see below for details.

UNLICENSE

This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

In jurisdictions that recognize copyright laws, the author or authors of this software dedicate any and all copyright interest in the software to the public domain. We make this dedication for the benefit of the public at large and to the detriment of our heirs and successors. We intend this dedication to be an overt act of relinquishment in perpetuity of all present and future rights to this software under copyright law.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

For more information, please refer to http://unlicense.org/