# textarea-notebook

> A lightweight React textarea component that looks like a notebook

Latest version **1.0.4** (published 2022-06-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install textarea-notebook
pnpm add textarea-notebook
yarn add textarea-notebook
bun add textarea-notebook
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-06-09 |
| First published | 2022-06-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Bruno Gimenes |
| Maintainers | brunogimenes |
| Keywords | textarea, notebook, react, typescript, lines |

## Links

- npm: https://www.npmjs.com/package/textarea-notebook
- Repository: https://github.com/brunogimenes/textarea-notebook
- Issues: https://github.com/brunogimenes/textarea-notebook/issues
- npm.io page: https://npm.io/package/textarea-notebook

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2022-06-09
- 1.0.3 — 2022-06-07
- 1.0.2 — 2022-06-05
- 1.0.1 — 2022-06-05
- 1.0.0 — 2022-06-05
- 0.9.1 — 2022-06-02
- 0.9.0 — 2022-06-02

## README

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


![](https://brunogimenes.github.io/textarea-notebook/assets/example-1.png)

### Install

#### npm

    npm install textarea-notebook

#### yarn

    yarn textarea-notebook

### Usage

    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        |

---
_Source: https://npm.io/package/textarea-notebook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._