🎯 React Search Bar KS

A modern, animated voice-enabled search component built with React, TypeScript, and Framer Motion.

![React Search Bar KS ]

✨ Features

• 🎤 Voice Search with Speech Recognition API
• 🎨 Beautiful gradient background with smooth animations
• 🌓 Glass-morphism UI design
• 🎯 TypeScript support for type safety
• 🎪 Framer Motion animations for smooth transitions
• 📱 Fully responsive design
• ⚡ Loading states and error handling
• 🔍 Real-time search feedback

🚀 Installation

# Using npm
npm install react-search-bar-ks

# Using yarn
yarn add react-search-bar-ks

💻 Usage

import { SearchBar } from 'react-elegant-voice-search';

function App() {
  const handleSearch = async (query: string) => {
    // Handle search logic here
    console.log('Searching for:', query);
  };

  return (
    <SearchBar 
      onSearch={handleSearch}
      placeholder="Search anything..."
    />
  );
}

🛠️ Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onSearch | (query: string) => void | Required | Callback function when search is triggered | | placeholder | string | "Search..." | Placeholder text for search input |

🎨 Features in Detail

Voice Search

• Uses the Web Speech API for voice recognition
• Visual feedback during voice recording
• Automatic search trigger after voice input
• Error handling for unsupported browsers

Animations

• Smooth entrance animations
• Microphone button hover effects
• Loading state animations
• Voice recording indicator pulse effect

UI/UX

• Clean, minimal design
• Glass-morphism effects
• Responsive layout
• Focus states and accessibility

🔧 Browser Support

• Chrome/Edge (Full support)
• Firefox (Full support except voice)
• Safari (Full support)
• Opera (Full support)

📦 Dependencies

• React 16.8+ (for Hooks)
• Framer Motion
• Lucide React
• Tailwind CSS

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

Distributed under the MIT License. See LICENSE for more information.

🙏 Credits

• Framer Motion for animations
• Lucide Icons for beautiful icons
• Tailwind CSS for styling

🐛 Bug Reports

Found a bug? Please create an issue with:

1. Bug description
2. Steps to reproduce
3. Expected vs actual behavior
4. Browser and OS details

📞 Support

• GitHub Issues: Create an issue
• Email:[email protected]
• LinkedIn: @sankarkumarkathirvel

Made with ❤️ by Sankarkumar Kathirvel