jb-textarea-react

simple textarea react component to input long text

• lightweight
• zero dependancy
• help you manage validation in easy way
• config auto height grow ability with max height

sample: https://codepen.io/javadbat/pen/poRZVXe

installation and setup

npm i jb-textarea-react

import {JBTextarea} from 'jb-textarea-react';

<JBTextarea label="label" value={valueState} message="text under the box"></JBTextarea>

get and set value

<JBTextarea label="label" value={valueState} onChange={(e)=>{setValueState(e.target.value)}}></JBTextarea>

events

<JBTextarea  onChange={(e)=>{}}></JBTextarea>
<JBTextarea  onKeydown={(e)=>{}}></JBTextarea>
<JBTextarea  onKeyup={(e)=>{}}></JBTextarea>
<JBTextarea  onKeypress={(e)=>{}}></JBTextarea>

auto height grow

you can set autoHeight to true so when user type something and text overflow a textarea height component will grow by itself in boundary of --jb-textarea-min-height and --jb-textarea-max-height that you set by css variable

<JBTextarea  autoHeight></JBTextarea>

the good point of set boundary with css variable is you can set different min or max base on device by CSS media queries.

set custome style

in some cases in your project you need to change defualt style of web-component for example you need zero margin or different border-radius and etc.
if you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component