src/examples/sampleChromeCommand.js
import React from "react";
import "./sampleChromeCommand.css";
export default function sampleChromeCommand(suggestion) {
const { name, highlight = [], category, shortcut } = suggestion;
// handle simple highlight when searching a single key
if (!Array.isArray(highlight)) {
return (
<div className="chrome-suggestion">
<span className={`chrome-category ${category}`}>{category}</span>
<span dangerouslySetInnerHTML={{ __html: highlight || name }} />
<kbd className="chrome-shortcut">{shortcut}</kbd>
</div>
);
}
// handle multiple highlights when searching multiple keys, see:
// https://github.com/farzher/fuzzysort#advanced-usage
// Note that we are passing "keys" to the fuzzysort options, ex:
// <CommandPalette
// commands={commands}
// options={{keys: ["name", "category"]}}
// renderCommand={sampleChromeCommand}
// />
return (
<div className="chrome-suggestion">
<span
dangerouslySetInnerHTML={{ __html: highlight[1] || category }}
className={`chrome-category ${category}`}
/>
<span dangerouslySetInnerHTML={{ __html: highlight[0] || name }} />
<kbd className="chrome-shortcut">{shortcut}</kbd>
</div>
);
}