omnibarというものを友人にオススメされたので、とりあえず触ってみました。

セットアップ

Create React Appだとimportできなかったので、Gatsbyを使いました。

$ gatsby -v
Gatsby CLI version: 2.7.21
$ gatsby new omnibar-try
$ cd omnibar-try
$ yarn start

Create React Appについて

bableの設定が合わないのか、Create React Appで作られたプロジェクトではFailしました。

./node_modules/omnibar/dist/index.js
Module not found: Can't resolve '/Users/develop/sandbox/test/omnibar-test/node_modules/babel-loader/lib/index.js' in '/Users/develop/sandbox/test/omnibar-test'

インストール

omnibarを追加すれば完了です。

$ yarn add omnibar

使い方は以下のようなイメージです。

import React from 'react'
import Omnibar from 'omnibar'

export default () => (
  <div>
    <Omnibar placeholder="Enter Keyword" extensions={[Extension1, Extension2]} />
  </div>
)

extensionsの中に実行したい処理系を記述していきます。

計算結果を出す

サンプルでまず用意されているのは、フォームに計算式をいれると、結果が下に出てくるというものです。

まず計算結果を返すExtentionsを作ります。

import {evaluate} from 'mathjs';
const MathExtension = (query) => {
  try {
    const answer = evaluate(query)
    return [
      {
        title: answer.toString()
      }
    ]
  } catch (e) {
    return []
  }
}

あとはこれをOmnibarのExtensionsに追加すればOKです。

<Omnibar placeholder="Enter Keyword" extensions={[MathExtension]} />

これで計算結果をすぐに表示することができます。

検索フォームを作る

続いて検索フォームを作ってみましょう。

今度はaxiosでnpmjsに対して検索リクエストを出してみます。

const NpmSearchExtension = async (query) => {
  try {
    const { data } = await get(`${URL}?q=${query}&size=10`)
    return data.map(
      item => ({
          title: item.package.name,
          url: item.package.links.npm,
      }),
    )
  } catch (e) {
    return []
  }
}

戻り値のオブジェクトにurlプロパティを入れることで、表示されるアイテムにリンクを設定できます。

Extensionの併用も可能

extensionsに登録した順に処理されて結果が表示される様子です。ですので上記の２つを並べて設定すると、計算結果とnpmの検索結果両方が表示されます。

アイテムのカスタマイズも可能

子要素を自分で実装することもできます。

    <Omnibar placeholder="Enter Keyword" extensions={[MathExtension,NpmSearchExtension]}>
      {({item}) => {
        if (item.url) {
          return (
            <a href={item.url}>
              {item.title}
            </a>
          )
        }
        return <div>{item.title}</div>
      }}
    </Omnibar>

デフォルトではprops.itemにデータが入ります。なのでその値を利用してカスタマイズすると良いでしょう。

ただしスタイルも自力で作る必要がありますので注意してください。