react elasticsearch

React Elasticsearch

React + ElasticsearchのUIコンポーネント。宣言コンポーネントを使用して検索アプリケーションを作成します。

使用法

ドキュメントと再生可能なデモはこちらから入手できます。

 const MySearchComponent = ( ) => (
  < Elasticsearch url = "http://example.org/search" >
    < SearchBox id = "mainSearch" fields = { [ "title" ] } />
    < Facet id = "actors" fields = { [ "actors" ] } />
    < Facet id = "releasedYear" fields = { [ "releasedYear" ] } />
    < Results
      id = "results"
      items = { data =>
        // Map on result hits and display whatever you want.
        data . map ( item => < MyCardItem key = { item . _id } source = { item . _source } /> )
      }
    />
  </ Elasticsearch >
) ; 

インストール

 npm i react-elasticsearch
yarn add react-elasticsearch

開発する

ストーリーブックでコンポーネントをテストできます（20以上の例）。

 npm run storybook

主な機能

• ？ MITライセンスの下でリリースされました。
• ？‍？各コンポーネントはReactで構築されており、カスタマイズ可能です。余分な機能も魔法も多すぎません。
• ？スタイルがないので、開発者自身の責任です。
• ？古いブラウザと互換性のあるLIB全体に35.32kb Gzip ：> 0.03％の使用。
• ？ No Legacy： 2019年に作成され、 2021年にフックで更新されました。

なぜ？

私たちは、Reactivesearchを使用して、フランスの文化遺産オープンプラットフォームの検索体験を構築し始めました。数週間後、私たちはLIBを微調整してハッキングするのに多くの時間を費やしたことに気付きました。私たちは自分自身のほぼすべてのコンポーネントを書き直しました。リポジトリに問題とリクエストを開始しましたが、ライブが書き直しプロセスに少しとどまっているように見えました。同様のAPIで簡単に拡張できるシンプルなLIBが必要であることがわかりました。これを作成しました。このLIBには、他のLIBよりも多くの機能があり、まともな競合他社でさえありません。しかし、それが私たちが検索体験を構築するのに役立って以来、それはリリースされました。それがあなたを助けることができることを願っています！

貢献

ここで開かれた問題とPR：https：//github.com/betagouv/react-elasticsearch