Skip to main content

Search By Chips Block

The SearchByChip Component is a fully customizable and accessible search by chips interface built with React and TypeScript. It provides a complete chip-based search experience with modern design patterns, clickable chip sections, and flexible customization options for filtering and searching functionality.

πŸš€ Installation​

npm install @nodeblocks/frontend-search-by-chip-block

πŸ“– Usage​

import {SearchByChip} from '@nodeblocks/frontend-search-by-chip-block';
Live Editor
function BasicSearchByChips() {
  const handleChipClick = (value: string) => {
    console.log('Chip clicked:', value);
    // Handle search logic here
  };
  
  const searchChips = [
    { value: 'electronics', label: 'Electronics' },
    { value: 'clothing', label: 'Clothing' },
    { value: 'books', label: 'Books' },
    { value: 'home-garden', label: 'Home & Garden' },
    { value: 'sports', label: 'Sports' }
  ];

  return (
    <SearchByChip
      searchByChipTitle="Quick Search"
      subtitle="Find what you're looking for"
      sectionTitle="Categories"
      onClickChip={handleChipClick}
      chips={searchChips}>
      <SearchByChip.Title />
      <SearchByChip.Subtitle />
      <SearchByChip.ChipSection />
    </SearchByChip>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
searchByChipTitleReactNodeRequiredMain title for the search by chip section
sectionTitleReactNodeRequiredTitle for the chip section
subtitleReactNodeRequiredSubtitle text displayed below the main title
onClickChip(value: string) => voidRequiredCallback function triggered when a chip is clicked
chips{ value: string; label: string }[]RequiredArray of chip objects to display
classNamestringundefinedAdditional CSS class name for styling the container
childrenBlocksOverrideundefinedFunction to override default blocks or add custom chip components

Note: The main component inherits all HTML div element props.

Sub-Components​

The SearchByChip 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.

SearchByChip.Title​

PropTypeDefaultDescription
childrenReactNodesearchByChipTitle from contextCustom content to override default title rendering

Note: This component inherits all HTML h4 element props.

SearchByChip.Subtitle​

PropTypeDefaultDescription
childrenReactNodesubtitle from contextCustom content to override default subtitle rendering

Note: This component inherits all HTML h6 element props.

SearchByChip.SectionTitle​

PropTypeDefaultDescription
childrenReactNodesectionTitle from contextCustom content to override default section title rendering

Note: This component inherits all HTML h6 element props.

SearchByChip.ChipItem​

PropTypeDefaultDescription
onClickChip(value: string) => voidRequiredCallback function for chip click events
valuestringRequiredUnique value identifier for the chip
labelReactNodeRequiredDisplay text for the chip

Note: This component inherits all HTML button element props.

SearchByChip.ChipIcon​

This component accepts no props and renders a checkmark SVG icon.

SearchByChip.ChipSection​

PropTypeDefaultDescription
childrenReactNodeDefault chip renderingCustom content to override default chip section rendering
chips{ value: string; label: string }[]From contextArray of chip objects to display
sectionTitleReactNodeFrom contextTitle for the chip section

Note: This component inherits all HTML div element props.

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {SearchByChip} from '@nodeblocks/frontend-search-by-chip-block';
import {ComponentProps, ReactNode} from 'react';

interface Chip {
  value: string;
  label: string;
}

// Main component interface
interface SearchByChipProps extends Omit<ComponentProps<'div'>, 'children'> {
  searchByChipTitle: ReactNode;
  sectionTitle: ReactNode;
  subtitle: ReactNode;
  onClickChip: (value: string) => void;
  chips: Chip[];
  className?: string;
}

// Sub-component interfaces
interface ChipItemProps extends ComponentProps<'button'> {
  onClickChip: (value: string) => void;
  value: string;
  label: ReactNode;
}

interface ChipSectionProps
  extends Partial<
    ComponentProps<'div'> & {
      chips: Chip[];
      sectionTitle: ReactNode;
    }
  > {
  children?: ReactNode;
}

// Usage example with comprehensive typing
interface CustomSearchData {
  categories: Chip[];
  onSearch: (searchValue: string) => void;
  title: string;
  description: string;
}

const SearchComponent = ({categories, onSearch, title, description}: CustomSearchData) => {
  const handleChipSelection = (value: string) => {
    onSearch(value);
    // Additional search logic
  };

  return (
    <SearchByChip
      searchByChipTitle={title}
      sectionTitle="Categories"
      subtitle={description}
      onClickChip={handleChipSelection}
      chips={categories}
      onClick={e => console.log('Container clicked')}>
      <SearchByChip.Title />
      <SearchByChip.Subtitle />
      <SearchByChip.ChipSection />
    </SearchByChip>
  );
};

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