Search

The Search component is a search input field that executes a callback on change and submit. The callback can be throttled to control its execution frequency.

Preview

Usage

import { Search } from 'components/lib';

function MyComponent({...props }){

  const handleSearch = (value) => {
    console.log('Search value:', value);
  };

  return (
    <div>
      <Search callback={ handleSearch } throttle={ 300 } placeholder='Search users...' />
    </div>
  );
}

Props

Prop	Description	Required	Value
callback	executed on change and submit	required	function
className	custom style	optional	SCSS or Tailwind
placeholder	placeholder text	optional	string (default: Search)
throttle	throttle the callback function execution in ms	optional	integer

Notes

• The Search component uses the Input component from 'components/lib' for the search input field.

• The callback prop specifies the function to be executed on change and submit.

• The throttle prop controls the frequency of callback execution in milliseconds.

• The placeholder prop provides the placeholder text for the search input and defaults to 'Search'.

• The value prop represents the current value of the search input.

• The className prop allows for custom styling to be applied.

• The debounce function is used to throttle the callback execution.