{"id":23039325,"url":"https://github.com/javadbat/jb-textarea-react","last_synced_at":"2025-08-14T19:32:31.043Z","repository":{"id":199021150,"uuid":"702009941","full_name":"javadbat/jb-textarea-react","owner":"javadbat","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-14T09:46:37.000Z","size":11,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-14T10:34:15.009Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javadbat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-08T08:26:06.000Z","updated_at":"2024-11-14T09:46:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"b0c23798-40d5-4b97-8bd3-fe51d89ba6c1","html_url":"https://github.com/javadbat/jb-textarea-react","commit_stats":null,"previous_names":["javadbat/jb-textarea-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-textarea-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-textarea-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-textarea-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-textarea-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javadbat","download_url":"https://codeload.github.com/javadbat/jb-textarea-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229859849,"owners_count":18135521,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-15T18:30:15.989Z","updated_at":"2025-08-14T19:32:31.037Z","avatar_url":"https://github.com/javadbat.png","language":"TypeScript","readme":"# jb-textarea-react\n\n\u003e [!WARNING]  \n\u003e this package is deprecated and moved to [jb-textarea/react](https://github.com/javadbat/jb-textarea/tree/main/react)\n\nsimple textarea react component to input long text\n\n- lightweight\n- zero dependency\n- help you manage validation in easy way\n- config auto height grow ability with max height\n\nDemo : [codeSandbox preview](https://3f63dj.csb.app/samples/jb-textarea) for just see the demo and [codeSandbox editor](https://codesandbox.io/p/sandbox/jb-design-system-3f63dj?file=%2Fsrc%2Fsamples%2FJBTextarea.tsx) if you want to see and play with code\n\n## installation and setup\n\n```cmd\nnpm i jb-textarea-react\n```\n\n```jsx\nimport {JBTextarea} from 'jb-textarea-react';\n\n\u003cJBTextarea label=\"label\" value={valueState} message=\"text under the box\"\u003e\u003c/JBTextarea\u003e\n```\n\n## get and set value\n\n```jsx\n\u003cJBTextarea label=\"label\" value={valueState} onChange={(e)=\u003e{setValueState(e.target.value)}}\u003e\u003c/JBTextarea\u003e\n```\n## set validation\n\nyou can set validation to your input by creating a validationList array and passing in to validationList props:\n\n``` javascript\n    const validationList = [\n        {\n            validator: /.{3}/g,\n            message: 'description must have 3 char at least'\n        },\n    //you can use function as a validator too\n        {\n            validator: (valueString)=\u003e{return valueString == \"hello\"},\n            message: 'you can only type hello in the box'\n        },\n    //you can also return string in validator if you want custom error message in some edge cases\n        {\n            validator: (valueString)=\u003e{\n               if(valueString.includes(\"*\")){\n                return 'you cant write * in your text'\n               }\n               return true;\n            },\n            message: 'default error when return false'\n        },\n    ];\n```\n```jsx\n    \u003cJBInput validationList={validationList}\u003e\u003c/JBInput\u003e\n```\n\n## check validation\n\nyou can check if an input value meet your validation standard by creating a ref of the element using `React.createRef()`.\n```javascript\n    const elementRef = React.createRef();\n    const isValid = elementRef.current.validation.checkValidity(true).isAllValid;\n```\nif `isValid` is `true` the value of input is valid.\n\n\n## events\n\n```js\n\u003cJBTextarea  onChange={(e)=\u003e{}}\u003e\u003c/JBTextarea\u003e\n\u003cJBTextarea  onKeydown={(e)=\u003e{}}\u003e\u003c/JBTextarea\u003e\n\u003cJBTextarea  onKeyup={(e)=\u003e{}}\u003e\u003c/JBTextarea\u003e\n\u003cJBTextarea  onKeypress={(e)=\u003e{}}\u003e\u003c/JBTextarea\u003e\n\u003cJBTextarea  onInput={(e)=\u003e{}}\u003e\u003c/JBTextarea\u003e\n```\n\n## auto height grow\n\nyou 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 \n\n```js\n\u003cJBTextarea  autoHeight\u003e\u003c/JBTextarea\u003e\n```\n\nthe good point of set boundary with css variable is you can set different min or max base on device by CSS media queries.\n\n## set custom style\n\nin 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.    \nif 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 \n| css variable name                     | description                                                                                   |\n| -------------                         | -------------                                                                                 |\n| --jb-textarea-margin                  | web-component margin default is `0 12px`                                                      |\n| --jb-textarea-border-radius           | web-component border-radius default is `16px`                                                 |\n| --jb-textarea-border-width            | web-component border-width default is `1px`                                                   |\n| --jb-textarea-border-color            | border color of select in normal mode                                                         |\n| --jb-textarea-border-color-focus      | border color of select in normal mode                                                         |\n| --jb-textarea-bgcolor                 | background color of input                                                                     |\n| --jb-textarea-border-botton-width     | border bottom thickness default is `3px`                                                      |\n| --jb-textarea-label-font-size         | font size of input label default is `0.8em`                                                   |\n| --jb-textarea-value-font-size         | font size of input value default is `1.1em`                                                   |\n| --jb-textarea-value-color             | color of value default in `initial`                                                           |\n| --jb-textarea-message-font-size       | font size of message we show under input                                                      |\n| --jb-textarea-message-error-color     | change color of error we show under input default is `red`                                    |\n| --jb-textarea-min-height              | minimum height of text area default is `80px`                                                 |\n| --jb-textarea-max-height              | minimum height of text area default is `none`                                                 |\n| --jb-textarea-placeholder-color       | placeholder color default is 'initial'                                                        |\n| --jb-textarea-placeholder-font-size   | placeholder font-size default is `initial`                                                    |\n| --jb-textarea-label-color             | label color default is `#1f1735`                                                              |    \n| --jb-textarea-value-color             | value color                                                                                   |\n\n## Other Related Docs:\n\n- see [jb-textarea](https://github.com/javadbat/jb-textarea) if you want to use this component as a web-component in other frameworks.\n\n- see [All JB Design system Component List](https://github.com/javadbat/design-system/blob/master/docs/component-list.md) for more components.\n\n- use [Contribution Guide](https://github.com/javadbat/design-system/blob/master/docs/contribution-guide.md) if you want to contribute in this component.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavadbat%2Fjb-textarea-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavadbat%2Fjb-textarea-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavadbat%2Fjb-textarea-react/lists"}