Function Highlight

console/src/components/Highlight.tsx:72–94

(props: HighlightProps)

}

const Highlight = (props: HighlightProps) => {
  const { children, query, styles, caseSensitive } = props;

  if (typeof children !== "string") {
    throw new Error("The children prop of Highlight must be a string");
  }

  const chunks = useHighlight({ query, text: children, caseSensitive });

  return (
    <>
      {chunks.map((chunk, index) =>
        chunk.match ? (
          <Mark key={index} sx={styles}>
            {chunk.text}
          </Mark>
        ) : (
          <Fragment key={index}>{chunk.text}</Fragment>
        ),
      )}
    </>
  );
};

export default Highlight;