react-highlight-within-textarea

React component for highlighting bits of text within a textarea

Install

npm install --save react-highlight-within-textarea

Usage

import React from 'react';
import { useState } from 'react';
import { HighlightWithinTextarea } from 'react-highlight-within-textarea'

const Example = () => {
  const [value, setValue] = useState("X Y Z and then XYZ");
  return (
    <HighlightWithinTextarea
      value={value}
      highlight={/[XYZ]/g}
      onChange= {event => setValue(event.target.value)}
    />
  );
};

The highlight property accepts several different types of values to describe what will be highlighted. You can see the various ways to highlight things, along with example code, on the demo page.

Properties

There are two notable elements within this component. These are the textarea and its surrounding container which facilitates the highlighting. Unless otherwise specified below, properties will be applied to the textarea. Some customization (like width) will need to be applied to both.

value: In React, you must supply a value and update it within the textarea.

onChange: In React, you must supply an onChange function that updates the value.

highlight: This specifies what to highlght. For more info, see the demo page.

containerStyle: Some textarea styles will also have to be applied to the surrounding container. This directly applies to the container.

containerClassName: This adds classes to the surrounding container.

all-other-properties: All other properties will be directly applied to the textarea.

Known Issues

Currently, textarea resizing is not supported.

License

This component was created using create-react-hook.
This component is a port of the highlight-within-textarea jquery plugin to React.
Special thanks to Joe Previte for How to Release a Custom React Component, Hook, or Effect as an npm Package.

rafaponieman / react-highlight-within-textarea