Skip to content

useTwain/react-highlight-within-textarea

 
 

Repository files navigation

react-highlight-within-textarea

React component for highlighting spans of text within a textarea

NPM JavaScript Style Guide Yarn Test

Install

npm install --save react-highlight-within-textarea
yarn add 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");
  const onChange = (value) => setValue(value);
  return (
    <HighlightWithinTextarea
      value={value}
      highlight={/[XYZ]/g}
      onChange= {onChange}
    />
  );
};

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 documentation and demo page.

Properties

value, onChange, ref, placeholder, highlight, selection

value: This can either be the text value or a DraftJs EditorState.

onChange: This is called whenever the text value or selection changes. You must update value to accept this change. You only have to set the selection property if you want to change the current selection.

ref: Standard React ref.

placeholder: The placeholder text to print when no value is set.

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

selection: A selection containing anchor and focus that can be use to place the cursor or set selections.

Known and Potential Issues

The following have not yet been verified to work or have issues.

  • Form submit might not work. To be honest, I don't even know how React works with form submit buttons.
  • Accessible Rich Internet Applications ARIA may not be supported.
  • Reference forwarding probably works, but it hasn't been tested.
  • Tab between form elements may not work. I haven't looked into this at all.

Changes

See HISTORY.md

License

MIT © bonafideduck


About

React component for highlighting bits of text within a textarea

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%