1.0.6 • Published 1 year ago
rich-html-textarea v1.0.6
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 |
|