React component for highlighting text within a textarea
npm install react-highlight-within-textarea> React component for highlighting spans of text within a textarea
  !Yarn Test
``bash`
npm install --save react-highlight-within-textarea
npm install --save draft-js
yarn add react-highlight-within-textarea
yarn add draft-js
Note: This has a peer dependency of draft-js.
`jsx
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 (
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.
The following properties are used directly by this library. Additional properties are passed
unmodified directly to the Draft.js Editor Component.
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.
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.
ref: This returns a forwardRef to the underlying Draft.js Editor Component.
The following properties are passed unmodified directly to the Draft.js Editor Component.
autoCapitalize
autoComplete
autoCorrect
editorKey
handleBeforeInput
handleDrop
handleDroppedFiles
handleKeyCommand
handlePastedFiles
handlePastedText
handleReturn
keyBindingFn
onBlur
onFocus
placeholder
readOnly
spellCheck
stripPastedStyles
textAlignment
textDirectionality
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.
See HISTORY.md
MIT © bonafideduck
---
* The 3.0 component was created using this blog post by Prateek Surana.
* The 2.0 component was created using nwb
* This is essentially a wrapper of Draft.js
* This component is a port of the highlight-within-textarea jquery plugin to React.