# text-area-with-line-number

> textarea with line numbers

Latest version **1.1.0** (published 2021-08-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install text-area-with-line-number
pnpm add text-area-with-line-number
yarn add text-area-with-line-number
bun add text-area-with-line-number
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2021-08-24 |
| First published | 2021-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 14.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hamayun Shahid |
| Maintainers | hamayun-shahid |
| Keywords | textarea-with-number, textarea-with-numbers, text-area-with-number, text-area-with-numbers, input, react, react-input, input-number, input-with-number, text-area, textarea |

## Links

- npm: https://www.npmjs.com/package/text-area-with-line-number
- Repository: https://github.com/Hamayun-Shahid/text-area-with-line-number
- Homepage: https://github.com/Hamayun-Shahid/text-area-with-line-number#readme
- Issues: https://github.com/Hamayun-Shahid/text-area-with-line-number
- npm.io page: https://npm.io/package/text-area-with-line-number

## Dependencies (4)

- [@babel/core](https://npm.io/package/@babel/core.md) ^7.15.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.15.0
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.14.5
- [@babel/preset-stage-0](https://npm.io/package/@babel/preset-stage-0.md) ^7.8.3

## 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.1.0 (latest) — 2021-08-24

## README

# text-area-with-line-number

## Usage

```React
import TextAreaWithLineNumber from 'text-area-with-line-number';

 <TextAreaWithLineNumber />
```

## Props

| Prop                      | Description                                       | Default                |
| ------------------------- | ------------------------------------------------- | ---------------------- |
| `onChange`                | function to be called on `onChange` event         |                        |
| `value`                   | in order to bind `value` for `text-area`          |                        |
| `placeholder`             | placeholder for`text-area`                        | `input your text here` |
| `lineNumberBackground`    | to set background of `line-numbers` div           | `#fff`                 |
| `textAreaBackgroundColor` | to set background of `text-area` div              | `#fff`                 |
| `lineNumberTextColor`     | to set font color of `line-number`                | `#000`                 |
| `textAreaTextColor`       | to set font color of `text-area`                  | `#000`                 |
| `border`                  | border between `line-numbers` and `text-area`     | `1px solid #ddd`       |
| `height`                  | height of the whole component                     | `30vh`                 |
| `textAreaFontSize`        | font size for text area                           | `1rem`                 |
| `lineNumberFontSize`      | font size for `line-numbers`                      | `1rem`                 |
| `scrollbarWidth`          | `text-area` height overflow scrollbar width       | `6px`                  |
| `scrollbarTrackColor`     | `text-area` height overflow scrollbar track color | `transparent`          |
| `srollbarThumbColor`      | `text-area` height overflow scrollbar thumb color | `#888`                 |
| `textAreaFontFamily`      | font family for `text-area`                       |                        |
| ` lineNumberFontFamily`   | font family for `line-numbers`                    |                        |

---
_Source: https://npm.io/package/text-area-with-line-number · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._