textarea-notebook - A ReactJS component
Use notebook like styles in your textarea components.
It will auto adapt line sizes according to the font-size.
Live Demo
https://brunogimenes.github.io/textarea-notebook
Install
npm
npm install textarea-notebookyarn
yarn textarea-notebookUsage
import { TextareaNotebook } from "textarea-notebook";
<TextareaNotebook
value={value}
onChange={(e) => setValue(e.target.value}}
style={{
minHeight: 400,
}}
options={{
verticalLineColor: "#d0a090",
lineColor: "#fcf9cc",
lineBorderColor: "#ccd",
verticalLineWidth: 2,
fontSize: 18,
marginLeft: 50,
}}
/>Options
You can customize colors, margins and sizes using the options attribute of the component.
TextareaNotebook accepts all the same props as a regular textarea element, like value, onChange, style, className, etc...
| Property | Type | Description | Default |
|---|---|---|---|
| verticalLineColor | string | The left vertical line color | "#d0a090" |
| lineColor | string | The horizontal lines background | "#fcf9cc" |
| lineBorderColor | string | The horizontal lines border color | "#ccd" |
| verticalLineWidth | number | The width of the left vertial line | 2 |
| fontSize | number | The fontSize for the component. line-height will be calculated based on this value. If you use custom classes or styles, be sure to use the same value here as the computed style | 18, |
| marginLeft | number | The margin between the left of the element and the text. Also defines where the vertical line will be | 50 |