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

import RichTextarea from "rich-html-textarea";

const App = () => {
  const [text, setText] = useState("");

  const onChange = (input) => {
    setText(input);
  };

  return (
    <div>
      <RichTextarea value={text} onChange={onChange} />
    </div>
  );
};

export 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 |

                                                                            |