Skip to main content

Filter Search Panel Block

The FilterSearchPanel Component is a fully customizable and accessible search interface with filtering capabilities built with React and TypeScript. It provides a complete search and filter experience with modern design patterns, form validation, and flexible customization options.

πŸš€ Installation​

npm install @nodeblocks/frontend-filter-search-panel-block

πŸ“– Usage​

import {FilterSearchPanel} from '@nodeblocks/frontend-filter-search-panel-block';
Live Editor
function BasicFilterSearchPanel() {
  const [filters, setFilters] = useState([
    { label: 'Active', key: 'status-active', groupName: 'Status' },
    { label: 'Web Development', key: 'category-web', groupName: 'Category' }
  ]);

  const handleRemoveFilter = (filter: FilterChip) => {
    setFilters(filters.filter(f => f.key !== filter.key));
  };

  const handleSearch = ({search}: {search: string}) => {
    console.log('Search submitted:', search);
    setFilters(prev => [...prev, {label: search, key: search, groupName: 'Custom'}]);
  };

  return (
    <FilterSearchPanel
      filters={filters}
      onClickRemoveFilter={handleRemoveFilter}
      onClickFilterButton={() => console.log('Filter button clicked')}
      onSearch={handleSearch}
      searchPlaceholder="Search services..."
      noFilterText="No filters applied"
      filterLabel="Filter Settings">
      <FilterSearchPanel.SearchInput />
      <FilterSearchPanel.ActionGroup />
    </FilterSearchPanel>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
filtersFilterChip[][]Array of currently selected filter chips to display
defaultSearchValuestringundefinedDefault value for the search input field
onClickRemoveFilter(filter: FilterChip) => voidundefinedCallback function triggered when a filter chip is removed
onClickFilterButton() => voidundefinedCallback function triggered when the filter button is clicked
onSearchChange(event: HTMLInputElement) => voidundefinedCallback function triggered when search input value changes
onSearch(data: T) => voidundefinedCallback function triggered when form is submitted with search data
searchPlaceholderstringundefinedPlaceholder text for the search input field
noFilterTextstringundefinedText displayed when no filters are selected
filterLabelstringundefinedLabel text for the filter button
classNamestringundefinedAdditional CSS class name for styling the form container
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component inherits all props from the HTML form element.

Sub-Components​

The FilterSearchPanel component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

FilterSearchPanel.SearchInput​

PropTypeDefaultDescription
searchPlaceholderstringFrom contextPlaceholder text shown in the search input
onSearchChange(event: HTMLInputElement) => voidundefinedCallback function triggered when input value changes
onSearch() => voidundefinedCallback function triggered when search is performed
defaultSearchValuestringundefinedDefault value for the search input
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all props from the HTML div element.

FilterSearchPanel.FilterButton​

PropTypeDefaultDescription
filterLabelstringFrom contextLabel text displayed on the filter button
onClickFilterButton() => voidFrom contextCallback function triggered when button is clicked
classNamestringundefinedAdditional CSS class name for styling
childrenReactNodeFrom contextCustom content to override default rendering

Note: This component inherits all props from the HTML button element.

FilterSearchPanel.SelectedFilterList​

PropTypeDefaultDescription
filtersFilterChip[]From contextArray of filter chips to display
onClickRemoveFilter(filter: FilterChip) => voidFrom contextCallback function triggered when a filter is removed
noFilterTextstringFrom contextText displayed when no filters are selected
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all props from the HTML div element.

FilterSearchPanel.FilterBadge​

PropTypeDefaultDescription
filterFilterChipRequiredFilter chip object containing label, key, and groupName
onClickRemoveFilter(filter: FilterChip) => voidRequiredCallback function triggered when the filter is removed
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all props from the HTML div element.

FilterSearchPanel.ActionGroup​

PropTypeDefaultDescription
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all props from the HTML div element.

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import FilterSearchPanel from '@nodeblocks/frontend-filter-search-panel-block';

// Filter chip structure
interface FilterChip {
  label: string;
  key: string;
  groupName: string;
}

// Default search form data structure
interface SearchFormData {
  search: string;
}

// Extend with custom fields
interface CustomSearchFormData extends SearchFormData {
  category?: string;
  status?: string;
  customField?: string;
}

const MyFilterSearchPanel = () => {
  const [selectedFilters, setSelectedFilters] = useState<FilterChip[]>([
    { label: 'Active', key: 'status-active', groupName: 'Status' },
    { label: 'Premium', key: 'type-premium', groupName: 'Type' }
  ]);

  const handleSearch = (formData: CustomSearchFormData) => {
    console.log('Search submitted:', formData);
    // Handle search submission
  };

  const handleRemoveFilter = (filter: FilterChip) => {
    setSelectedFilters(prev => prev.filter(f => f.key !== filter.key));
  };

  const handleFilterButtonClick = () => {
    console.log('Opening filter modal');
    // Handle filter button click
  };

  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log('Search value changed:', event.target.value);
    // Handle search input changes
  };

  return (
    <FilterSearchPanel<CustomSearchFormData>
      filters={selectedFilters}
      onSearch={handleSearch}
      onClickRemoveFilter={handleRemoveFilter}
      onClickFilterButton={handleFilterButtonClick}
      onSearchChange={handleSearchChange}
      searchPlaceholder="Search for services..."
      noFilterText="No filters applied"
      filterLabel="Filter Options">
      <FilterSearchPanel.SearchInput />
      <FilterSearchPanel.ActionGroup />
    </FilterSearchPanel>
  );
};

Built with ❀️ using React, TypeScript, and modern web standards.