rich-html-textarea
v1.0.6
Published
This HTML textarea component includes features such as displaying line numbers for each line of text in the textarea, and allowing users to copy the contents of the textarea to the clipboard with the click of a button
Downloads
16
Maintainers
Readme
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 |
|