text-area-with-line-number

textarea with line numbers

Usage no npm install needed!

<script type="module">
  import textAreaWithLineNumber from 'https://cdn.skypack.dev/text-area-with-line-number';
</script>

README

text-area-with-line-number

Usage

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