jb-textarea-react

Warning

this package is deprecated and moved to jb-textarea/react

simple textarea react component to input long text

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

Demo : codeSandbox preview for just see the demo and codeSandbox editor if you want to see and play with code

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>

set validation

you can set validation to your input by creating a validationList array and passing in to validationList props:

    const validationList = [
        {
            validator: /.{3}/g,
            message: 'description must have 3 char at least'
        },
    //you can use function as a validator too
        {
            validator: (valueString)=>{return valueString == "hello"},
            message: 'you can only type hello in the box'
        },
    //you can also return string in validator if you want custom error message in some edge cases
        {
            validator: (valueString)=>{
               if(valueString.includes("*")){
                return 'you cant write * in your text'
               }
               return true;
            },
            message: 'default error when return false'
        },
    ];

    <JBInput validationList={validationList}></JBInput>

check validation

you can check if an input value meet your validation standard by creating a ref of the element using React.createRef().

    const elementRef = React.createRef();
    const isValid = elementRef.current.validation.checkValidity(true).isAllValid;

if isValid is true the value of input is valid.

events

<JBTextarea  onChange={(e)=>{}}></JBTextarea>
<JBTextarea  onKeydown={(e)=>{}}></JBTextarea>
<JBTextarea  onKeyup={(e)=>{}}></JBTextarea>
<JBTextarea  onKeypress={(e)=>{}}></JBTextarea>
<JBTextarea  onInput={(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 custom style

in some cases in your project you need to change default 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

css variable name	description
--jb-textarea-margin	web-component margin default is 0 12px
--jb-textarea-border-radius	web-component border-radius default is 16px
--jb-textarea-border-width	web-component border-width default is 1px
--jb-textarea-border-color	border color of select in normal mode
--jb-textarea-border-color-focus	border color of select in normal mode
--jb-textarea-bgcolor	background color of input
--jb-textarea-border-botton-width	border bottom thickness default is 3px
--jb-textarea-label-font-size	font size of input label default is 0.8em
--jb-textarea-value-font-size	font size of input value default is 1.1em
--jb-textarea-value-color	color of value default in initial
--jb-textarea-message-font-size	font size of message we show under input
--jb-textarea-message-error-color	change color of error we show under input default is red
--jb-textarea-min-height	minimum height of text area default is 80px
--jb-textarea-max-height	minimum height of text area default is none
--jb-textarea-placeholder-color	placeholder color default is 'initial'
--jb-textarea-placeholder-font-size	placeholder font-size default is initial
--jb-textarea-label-color	label color default is #1f1735
--jb-textarea-value-color	value color

Other Related Docs:

• see jb-textarea if you want to use this component as a web-component in other frameworks.

• see All JB Design system Component List for more components.

• use Contribution Guide if you want to contribute in this component.