highlight-input

highlight-input is a React component designed to enhance user experience by providing keyword highlighting functionality within text input fields. Easily integrate this component into your React applications to dynamically highlight specified keywords as users type or interact with the input, facilitating easier navigation and comprehension within large text datasets.

Example

https://github.com/liuzheng644607/highlight-input/assets/8045477/aa1f6426-e308-4c3e-a124-ad127ca9a9f0

Usage

npm i highlight-input

import React, { useRef, useState } from 'react';
import HighlightInput from 'highlight-input';

export default () => {
  const inputInstanceRef = useRef(null);
  const [state, setState] = useState({
    inputValue: '',
  });
  return (
    <>
      <HighlightInput
        ref={inputInstanceRef}
        placeholder="Enter some stuff..."
        value={state.inputValue}
        onChange={(v) => {
          setState((prev) => {
            return {
              ...prev,
              inputValue: v,
            };
          });
        }}
      />
      <button
        onClick={() => {
          inputInstanceRef.current?.insertKeywords({
            label: 'Operator',
            value: '${model.operator}',
          });
        }}
      >
        Insert operator
      </button>
    </>
  );
};

Options

export interface Keywords {
  label?: string;
  value?: string;
  [key: string]: any;
}

export interface InputInstance {
  insertKeywords: (keywords: Keywords) => void;
  element: HTMLDivElement | null;
}

export type RichValue = Array<Keywords | string>;

export interface Props {
  /**
   * placeholder
   */
  placeholder?: string;
  disabled?: boolean;
  className?: string;
  editorClassName?: string;
  defaultValue?: RichValue;
  value?: RichValue;
  onChange?: (value: RichValue) => void;
  onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
  onBlur?: (e: React.FocusEvent<HTMLDivElement, Element>) => void;
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;
  /**
   * Whether to allow line breaks, like the textarea element
   */
  allowLineBreak?: boolean;
  /**
   * Custom keywords style
   */
  keywordsStyle?:
    | React.CSSProperties
    | ((
        defaultStyle: React.CSSProperties,
        keywords: Keywords,
      ) => React.CSSProperties);
}

LICENSE

MIT