メインコンテンツまでスキップ

Search By Chipsブロック

SearchByChipコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルなチップ検索インターフェースです。モダンなデザインパターン、クリック可能なチップセクション、フィルタリングと検索機能のための柔軟なカスタマイズオプションを備えた完全なチップベースの検索体験を提供します。

🚀 インストール​

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

📖 使用法​

import {SearchByChip} from '@nodeblocks/frontend-search-by-chip-block';
ライブエディター
function BasicSearchByChips() {
  const handleChipClick = (value: string) => {
    console.log('チップがクリックされました:', value);
    // ここで検索ロジックを処理
  };
  
  const searchChips = [
    { value: 'electronics', label: '電子機器' },
    { value: 'clothing', label: '衣類' },
    { value: 'books', label: '書籍' },
    { value: 'home-garden', label: 'ホーム・ガーデン' },
    { value: 'sports', label: 'スポーツ' }
  ];

  return (
    <SearchByChip
      searchByChipTitle="クイック検索"
      subtitle="お探しのものを見つけてください"
      sectionTitle="カテゴリ"
      onClickChip={handleChipClick}
      chips={searchChips}>
      <SearchByChip.Title />
      <SearchByChip.Subtitle />
      <SearchByChip.ChipSection />
    </SearchByChip>
  );
}
結果
Loading...

🔧 プロパティリファレンス​

メインコンポーネントプロパティ​

プロパティ型デフォルト説明
searchByChipTitleReactNode必須チップ検索セクションのメインタイトル
sectionTitleReactNode必須チップセクションのタイトル
subtitleReactNode必須メインタイトルの下に表示されるサブタイトルテキスト
onClickChip(value: string) => void必須チップがクリックされたときにトリガーされるコールバック関数
chips{ value: string; label: string }[]必須表示するチップオブジェクトの配列
classNamestringundefinedコンテナのスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトブロックをオーバーライドするか、カスタムチップコンポーネントを追加する関数

注意: メインコンポーネントはすべてのHTML div要素プロパティを継承します。

サブコンポーネント​

SearchByChipコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

SearchByChip.Title​

プロパティ型デフォルト説明
childrenReactNodeコンテキストのsearchByChipTitleデフォルトタイトルレンダリングをオーバーライドするカスタムコンテンツ

注意: このコンポーネントはすべてのHTML h4要素プロパティを継承します。

SearchByChip.Subtitle​

プロパティ型デフォルト説明
childrenReactNodeコンテキストのsubtitleデフォルトサブタイトルレンダリングをオーバーライドするカスタムコンテンツ

注意: このコンポーネントはすべてのHTML h6要素プロパティを継承します。

SearchByChip.SectionTitle​

プロパティ型デフォルト説明
childrenReactNodeコンテキストのsectionTitleデフォルトセクションタイトルレンダリングをオーバーライドするカスタムコンテンツ

注意: このコンポーネントはすべてのHTML h6要素プロパティを継承します。

SearchByChip.ChipItem​

プロパティ型デフォルト説明
onClickChip(value: string) => void必須チップクリックイベントのコールバック関数
valuestring必須チップの一意の値識別子
labelReactNode必須チップの表示テキスト

注意: このコンポーネントはすべてのHTML button要素プロパティを継承します。

SearchByChip.ChipIcon​

このコンポーネントはプロパティを受け取らず、チェックマークSVGアイコンをレンダリングします。

SearchByChip.ChipSection​

プロパティ型デフォルト説明
childrenReactNodeデフォルトチップレンダリングデフォルトチップセクションレンダリングをオーバーライドするカスタムコンテンツ
chips{ value: string; label: string }[]コンテキストから表示するチップオブジェクトの配列
sectionTitleReactNodeコンテキストからチップセクションのタイトル

注意: このコンポーネントはすべてのHTML div要素プロパティを継承します。

🔧 TypeScriptサポート​

包括的な型定義による完全なTypeScriptサポート：

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

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

// メインコンポーネントインターフェース
interface SearchByChipProps extends Omit<ComponentProps<'div'>, 'children'> {
  searchByChipTitle: ReactNode;
  sectionTitle: ReactNode;
  subtitle: ReactNode;
  onClickChip: (value: string) => void;
  chips: Chip[];
  className?: string;
}

// サブコンポーネントインターフェース
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;
}

// 包括的な型付けでの使用例
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);
    // 追加の検索ロジック
  };

  return (
    <SearchByChip
      searchByChipTitle={title}
      sectionTitle="カテゴリ"
      subtitle={description}
      onClickChip={handleChipSelection}
      chips={categories}
      onClick={e => console.log('コンテナがクリックされました')}>
      <SearchByChip.Title />
      <SearchByChip.Subtitle />
      <SearchByChip.ChipSection />
    </SearchByChip>
  );
};

React、TypeScript、モダンWebスタンダードを使用して❤️で構築されました。