Jb-textarea NPM

jb-textarea

simple textarea web component to input long text

lightweight
zero dependency
advance validation with jb-validation module
help you manage validation in easy way
config auto height grow ability with max height
web component so you can use it with any framework you need

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

using with JS frameworks

to use this component in react see jb-textarea/react;

installation and setup

npm i jb-textarea

<jb-textarea label="توضیحات" value="" message="متن زیر باکس"></jb-textarea>

get and set value

document.querySelector("jb-textarea").value;
// retun inputed text
document.querySelector("jb-textarea").value = "salam";
set value to salam

set validation

jb-textarea use jb-validation inside to handle validation so for more information you can read it's documentation.
for simple usage you can set validation to your input:

//you have 2 ways: 
//1- set list directly 
    description.validation.list = [
        {
            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'
        },
    ];
//2- pass a function that returns the validation list so on each validation process we execute your callback function and get the needed validation list
const result = document.getElementByTagName('jb-textarea').validation.addValidationListGetter(getterFunction)

check validation

like any other jb design system you can access validation by validation property:

//access validation module
document.getElementByTagName('jb-textarea').validation
// check if input pass all the validations. showError is a boolean that determine your intent to show error to user on invalid status.
const result = document.getElementByTagName('jb-textarea').validation.checkValidity(showError)

events

document.querySelector("jb-textarea").addEventListener('change',func);
document.querySelector("jb-textarea").addEventListener('keydown',func);
document.querySelector("jb-textarea").addEventListener('keyup',func);
document.querySelector("jb-textarea").addEventListener('keypress',func);
document.querySelector("jb-textarea").addEventListener('input',func);

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

document.querySelector("jb-textarea").autoHeight = true;

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