Components

Search Bar

Search Bar

Component

  • Smartphone

    products

  • Laptop

    products

  • Headphones

    products

  • Smartwatch

    products

  • Electronics

    categories

  • Clothing

    categories

  • Home & Garden

    categories

  • Sports & Outdoors

    categories

  • Apple

    brands

  • Samsung

    brands

  • Nike

    brands

  • Sony

    brands

Dependencies

npmi lucide-react

npmi framer-motion

Usage Methods

This component has more usage methods that you could use:

  1. Passing items as prop to the component instead of defining them directly in the code.
  2. Pass filters as props to the component to make filters dynamic.
  3. Allow passing a callback for handling the search so that the logic can be handled externally.
  4. Allow a callback to handle the filter change to leave the filter handling logic to the user.
  5. Support a search debounce with a customisable time passed as a prop.
  6. Allow passing a customisable rendering function for list items.
  7. Add an option to load external data via API and manage the loading state.
  8. Pass parameters to control the animation (duration, type of animation) via prop.
  9. Accept a prop to customise the layout (e.g. horizontal or vertical list) of the items.
  10. Use a JSON file to hold the data and insert it into the search bar.

Use the component

import FilterableSearchBar from 'your-path';
 
export default function YourComponent() {
  return (
    <div>
      <FilterableSearchBar />
    </div>
  )
}