A simple react rich html textarea

This project is a simple example of a rich HTML text area with line numbers and a copy icon. The text area allows users to input and edit code, with line numbers to aid readability, and a copy button for easy sharing.

Please see the DEMO here

Install

npm

npm install --save rich-html-textarea

yarn

yarn add rich-html-textarea

Example

1import RichTextarea from "rich-html-textarea";
2
3const App = () => {
4  const [text, setText] = useState("");
5
6  const onChange = (input) => {
7    setText(input);
8  };
9
10  return (
11    <div>
12      <RichTextarea value={text} onChange={onChange} />
13    </div>
14  );
15};
16
17export default App;

API

Prop	Type	Required	Default	Description
value	String	✓		Text value of the textarea
onChange	Function	✓		This function is used to capture the change in textarea. It can be used to update the state in your file.
showLine	Boolean		true	Show line numbers in the textarea
showCopyIcon	Boolean		true	show copy icon on the top right corner of textarea
css	CSSProperties			Control width/height and other css properties
name	String			Specifies a name for a text area
placeholder	String			Specifies a short hint that describes the expected value of a text area
disabled	Boolean		false	Specifies that a text area should be disabled
readOnly	Boolean		false	Specifies that a text area should be read-only
maxLength	Boolean		false	Specifies the maximum number of characters allowed in the text area
autoFocus	Boolean		false	Specifies that a text area should automatically get focus when the page loads

                                                                            |