react-highlightable-input

A custom react input component that allows highlighting or styling of specific text as it is typed. For example, you can highlight mentions starting with @ symbol in a text input as the user types them.

Install

npm install react-highlightable-input

Usage

import {
 HighlightableTextInput,
 highlightMentions,
 cleanHtml,
} from "react-highlightable-input";
import { useRef, useState } from "react";
import "./App.css";

function App() {
 const inputRef = useRef<HTMLDivElement>(null);
 const shadowRef = useRef<HTMLDivElement>(null);
 const [highlightedContent, setHiglightedContent] = useState<string>("");

 const onInput = () => {
  if (inputRef.current) {
   const value = inputRef.current.innerHTML;
   const highlighted = highlightMentions(value, /@[\w]+/g, "#1d9bf0");
   setHiglightedContent(highlighted);
  }
 };

 const onSend = () => {
  console.log("Send message:", cleanHtml(highlightedContent));
 };

 return (
  <div>
   <div
    style={{
     border: "1px solid black",
     padding: "5px",
    }}>
    <HighlightableTextInput
     inputRef={inputRef}
     shadowRef={shadowRef}
     highlightedContent={highlightedContent}
     setHiglightedContent={setHiglightedContent}
     onInput={onInput}
     placeholderText="Highlight mentions with @ symbol"
    />
   </div>
   <button
    onClick={onSend}
    style={{
     backgroundColor: "#4caf50",
     color: "white",
     padding: "5px 10px",
     border: "none",
     cursor: "pointer",
     alignSelf: "flex-start",
     marginTop: "10px",
    }}>
    Send
   </button>
  </div>
 );
}

export default App;

A closer look at the HighlightableTextInput component

<HighlightableTextInput
 inputRef={inputRef} // Ref to the input element
 shadowRef={shadowRef} // Ref to the shadow element
 highlightedContent={highlightedContent} // The content to be highlighted
 setHiglightedContent={setHiglightedContent} // Function to set the highlighted content
 onInput={onInput} // Function to be called when the input changes
/>

Props

| Prop Name | Type | Description | | ---------------------- | -------------------------------------------------- | -------------------------------------------- | | inputRef | React.RefObject<HTMLDivElement> | A reference to the input element. | | shadowRef | React.RefObject<HTMLDivElement> | A reference to the shadow element. | | highlightedContent | string | The content that should be highlighted. | | placeholderText | string (optional) | The placeholder text for the input element. | | onInput | (event: React.FormEvent<HTMLDivElement>) => void | The event handler for the input event. | | setHiglightedContent | (highlighted: string) => void | The function to set the highlighted content. | | style | React.CSSProperties (optional) | The CSS styles for the input element. |

export interface HighlightableTextInputProps {
 inputRef: React.RefObject<HTMLDivElement>;
 shadowRef: React.RefObject<HTMLDivElement>;
 highlightedContent: string;
 placeholderText?: string;
 onInput: (event: React.FormEvent<HTMLDivElement>) => void;
 setHiglightedContent: (highlighted: string) => void;
 style?: React.CSSProperties;
}

Highlight Functions

highlightMentions

function highlightMentions(
 text: string,
 mentionPattern: RegExp,
 highlightColor: string
): string;

This function takes a string of text, a regular expression pattern to match mentions, and a color to highlight the mentions. It returns a new string where the mentions are wrapped in a span tag with the specified color.

Parameters:

• text: The input text.
• mentionPattern: The regular expression pattern to match mentions.
• highlightColor: The color to highlight the mentions.

Returns:

A new string where the mentions are highlighted with the specified color.

highlightText

function highlightText(
 text: string,
 pattern: RegExp,
 style: React.CSSProperties
): string;

This function takes a string of text, a regular expression pattern to match mentions, and a style object to style the mentions. It returns a new string where the mentions are wrapped in a span tag with the specified styles.

Parameters:

• text: The input text.
• mentionPattern: The regular expression pattern to match mentions.
• style: The style object to style the mentions. This should be a React.CSSProperties object.

Returns:

A new string where the mentions are styled with the specified styles.

Utility Functions

cleanHtml

function cleanHtml(html: string): string

Parameters:

• html: The input HTML string.

Returns:

A new string where all HTML tags are removed, <div> tags are replaced with newlines, and < and > entities are replaced with < and > characters, respectively.

Usage Instructions for the HighlightableTextInput component

1. Setting border and padding

If you want to add the border to the react-highlightable-input then wrap the HighlightableTextInput component with a div and add the border to the div element. Same goes for other styles like padding margin. Otherwise some unexpected styling issues may occur.

<div style={{ border: "1px solid black", padding: "5px" }}>
 <HighlightableTextInput
  inputRef={inputRef}
  shadowRef={shadowRef}
  highlightedContent={highlightedContent}
  setHiglightedContent={setHiglightedContent}
  onInput={onInput}
 />
</div>

2. Setting height and width

Width and height of the input div can be set in two ways

1. Via style props

<div style={{ border: "1px solid black", padding: "5px" }}>
 <HighlightableTextInput
  inputRef={inputRef}
  shadowRef={shadowRef}
  highlightedContent={highlightedContent}
  setHiglightedContent={setHiglightedContent}
  onInput={onInput}
  style={{
   width: "500px",
   height: "300px",
  }}
 />
</div>

2. Via HighlightableTextInput div id (highlightableTextInput-container)

#highlightableTextInput-container {
 width: 500px;
 height: 300px;
}

<div style={{ border: "1px solid black", padding: "5px", display: "inline-block" }}>
  <HighlightableTextInput
    inputRef={inputRef}
    shadowRef={shadowRef}
    highlightedContent={highlightedContent}
    setHiglightedContent={setHiglightedContent}
    onInput={onInput}
</div>

Note: The display: inline-block is used to make the div element take the width and height of the child element.

Code Sandbox