jb-textarea 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 javad
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,71 @@
+# 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
+
+```cmd
+npm i jb-textarea-react
+``
+`
+```jsx
+import {JBTextarea} from 'jb-textarea-react';
+<JBTextarea label="label" value={valueState} message="text under the box"></JBTextarea>
+```
+
+## get and set value
+
+```jsx
+<JBTextarea label="label" value={valueState} onChange={(e)=>{setValueState(e.target.value)}}></JBTextarea>
+```
+
+### events
+
+```js
+<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 
+
+```js
+<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 
+| css variable name                     | description                                                                                   |
+| -------------                         | -------------                                                                                 |
+| --jb-textarea-margin                  | web-component margin defualt is `0 12px`                                                      |
+| --jb-textarea-border-radius           | web-component border-radius defualt is `16px`                                                 |
+| --jb-textarea-border-width            | web-component border-width defualt 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 desualt is `3px`                                                      |
+| --jb-textarea-label-font-size         | font size of input label defualt is `0.8em`                                                   |
+| --jb-textarea-value-font-size         | font size of input value defualt is `1.1em`                                                   |
+| --jb-textarea-value-color             | color of value defualt 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 defualt is `red`                                    |
+| --jb-textarea-min-height              | minimum height of text area defualt is `80px`                                                 |
+| --jb-textarea-max-height              | minimum height of text area defualt is `none`                                                 |
+| --jb-textarea-placeholder-color       | placeholder color defualt is 'initial'                                                        |
+| --jb-textarea-placeholder-font-size   | placeholder font-size defualt is `initial`                                                    |
+| --jb-textarea-label-color             | label color defualt is `#1f1735`                                                              |    
+| --jb-textarea-value-color             | value color                                                                                   |

package/dist/JBTextArea.js

@@ -0,0 +1,82 @@
+import React, { useEffect, useState, useRef, useImperativeHandle } from 'react';
+import 'jb-textarea';
+
+function useEvent(dom, event, handler) {
+  var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  useEffect(function () {
+    if (dom) {
+      // initiate the event handler
+      dom.addEventListener(event, handler, passive);
+    }
+    // this will clean up the event every time the component is re-rendered
+    return function cleanup() {
+      if (dom) {
+        dom.removeEventListener(event, handler, passive);
+      }
+    };
+  });
+}
+
+/* eslint-disable no-inner-declarations */
+// eslint-disable-next-line react/display-name
+const JBTextarea = React.forwardRef((props, ref) => {
+    {
+        //we set this state so when ref change we have a render and our event listener will be updated
+        const [refChangeCount, refChangeCountSetter] = useState(0);
+        const element = useRef(null);
+        useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
+        useEffect(() => {
+            refChangeCountSetter(refChangeCount + 1);
+        }, [element.current]);
+        function onChange(e) {
+            if (props.onChange) {
+                props.onChange(e);
+            }
+        }
+        function onKeydown(e) {
+            if (props.onKeydown) {
+                props.onKeydown(e);
+            }
+        }
+        function onKeyup(e) {
+            if (props.onKeyup) {
+                props.onKeyup(e);
+            }
+        }
+        function onFocus(e) {
+            if (props.onFocus && e instanceof FocusEvent) {
+                props.onFocus(e);
+            }
+        }
+        function onBlur(e) {
+            if (props.onBlur && e instanceof FocusEvent) {
+                props.onBlur(e);
+            }
+        }
+        useEffect(() => {
+            const value = props.value || '';
+            if (element.current) {
+                element.current.value = value;
+            }
+        }, [props.value]);
+        useEffect(() => {
+            if (element.current) {
+                element.current.validationList = props.validationList || [];
+            }
+        }, [props.validationList]);
+        useEffect(() => {
+            if (element.current) {
+                element.current.autoHeight = props.autoHeight || false;
+            }
+        }, [props.autoHeight]);
+        useEvent(element.current, 'change', onChange);
+        useEvent(element.current, 'keydown', onKeydown);
+        useEvent(element.current, 'keyup', onKeyup);
+        useEvent(element.current, 'focus', onFocus);
+        useEvent(element.current, 'blur', onBlur);
+        return (React.createElement("jb-textarea", { placeholder: props.placeholder, class: props.className, ref: element, label: props.label, message: props.message }));
+    }
+});
+
+export { JBTextarea };
+//# sourceMappingURL=JBTextArea.js.map

package/dist/JBTextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JBTextArea.js","sources":["../../custom-hooks/UseEvent.js","../lib/JBTextArea.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom, event, handler, passive = false) {\r\n    useEffect(() => {\r\n        if (dom) {\r\n            // initiate the event handler\r\n            dom.addEventListener(event, handler, passive); \r\n        }\r\n        // this will clean up the event every time the component is re-rendered\r\n        return function cleanup() {\r\n            if(dom){\r\n                dom.removeEventListener(event, handler, passive);\r\n            }\r\n        };\r\n    });\r\n}","/* eslint-disable no-inner-declarations */\r\nimport React, { useRef, useEffect, useImperativeHandle, useState } from 'react';\r\nimport 'jb-textarea';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport {JBTextareaValidationItem, JBTextareaWebComponent} from 'jb-textarea';\r\nimport { useEvent } from '../../custom-hooks/UseEvent';\r\n\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-textarea': JBTextareaType;\r\n      }\r\n      interface JBTextareaType extends React.DetailedHTMLProps<React.HTMLAttributes<JBTextareaWebComponent>, JBTextareaWebComponent> {\r\n        class?:string,\r\n        label?: string,\r\n        name?:string,\r\n        message?:string,\r\n        // ref:React.RefObject<JBDateInputWebComponent>,\r\n      }\r\n    }\r\n}\r\n// eslint-disable-next-line react/display-name\r\nconst JBTextarea = React.forwardRef((props:JBTextareaProps, ref) => {\r\n    {\r\n        //we set this state so when ref change we have a render and our event listener will be updated\r\n        const [refChangeCount , refChangeCountSetter] = useState(0);\r\n        const element = useRef<JBTextareaWebComponent>(null);\r\n        useImperativeHandle(\r\n            ref,\r\n            () => (element ? element.current : {}),\r\n            [element],\r\n        );\r\n        useEffect(()=>{\r\n            refChangeCountSetter(refChangeCount+1);\r\n        },[element.current]);\r\n        function onChange(e:JBTextareaEventType<Event>) {\r\n            if (props.onChange) {\r\n                props.onChange(e);\r\n            }\r\n        }\r\n        function onKeydown(e:JBTextareaEventType<KeyboardEvent>) {\r\n            if (props.onKeydown) {\r\n                props.onKeydown(e);\r\n            }\r\n        }\r\n        function onKeyup(e:JBTextareaEventType<KeyboardEvent>) {\r\n            if (props.onKeyup) {\r\n                props.onKeyup(e);\r\n            }\r\n        }\r\n        function onFocus(e:JBTextareaEventType<FocusEvent>) {\r\n            if (props.onFocus && e instanceof FocusEvent) {\r\n                props.onFocus(e);\r\n            }\r\n        }\r\n        function onBlur(e:JBTextareaEventType<FocusEvent>) {\r\n            if (props.onBlur && e instanceof FocusEvent) {\r\n                props.onBlur(e);\r\n            }\r\n        }\r\n        useEffect(() => {\r\n            const value:string = props.value || '';\r\n            if(element.current){\r\n                element.current.value = value;\r\n            }\r\n        }, [props.value]);\r\n\r\n        useEffect(() => {\r\n            if(element.current){\r\n                element.current.validationList = props.validationList || [];\r\n            }\r\n        }, [props.validationList]);\r\n\r\n        useEffect(() => {\r\n            if(element.current){\r\n                element.current.autoHeight = props.autoHeight || false;\r\n            }\r\n        }, [props.autoHeight]);\r\n        useEvent(element.current, 'change', onChange);\r\n        useEvent(element.current, 'keydown', onKeydown);\r\n        useEvent(element.current, 'keyup', onKeyup);\r\n        useEvent(element.current, 'focus', onFocus);\r\n        useEvent(element.current, 'blur', onBlur);\r\n        return (\r\n            <jb-textarea placeholder={props.placeholder} class={props.className} ref={element} label={props.label} message={props.message}></jb-textarea>\r\n        );\r\n    }\r\n});\r\nexport type JBTextareaEventType<T> = T & {\r\n    target: JBTextareaWebComponent\r\n}\r\ntype JBTextareaProps = {\r\n    label?: string,\r\n    value?: string,\r\n    onChange?: (e:JBTextareaEventType<Event>)=>void,\r\n    onFocus?:(e:JBTextareaEventType<FocusEvent>)=>void,\r\n    onBlur?:(e:JBTextareaEventType<FocusEvent>)=>void,\r\n    onKeydown?: (e:JBTextareaEventType<KeyboardEvent>)=>void,\r\n    onKeyup?: (e:JBTextareaEventType<KeyboardEvent>)=>void,\r\n    onInput?: (e:JBTextareaEventType<InputEvent>)=>void,\r\n    onBeforeinput?: (e:JBTextareaEventType<InputEvent>)=>void,\r\n    placeholder?:string,\r\n    className?: string,\r\n    validationList?:JBTextareaValidationItem[],\r\n    autoHeight?: boolean,\r\n    message?:string\r\n}\r\nexport {JBTextarea};"],"names":["useEvent","dom","event","handler","passive","arguments","length","undefined","useEffect","addEventListener","cleanup","removeEventListener"],"mappings":"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"}

package/dist/JBTextArea.umd.js

@@ -0,0 +1,93 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('jb-textarea')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', 'jb-textarea'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JBTextArea = {}, global.React));
+})(this, (function (exports, React) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+    function useEvent(dom, event, handler) {
+      var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+      React.useEffect(function () {
+        if (dom) {
+          // initiate the event handler
+          dom.addEventListener(event, handler, passive);
+        }
+        // this will clean up the event every time the component is re-rendered
+        return function cleanup() {
+          if (dom) {
+            dom.removeEventListener(event, handler, passive);
+          }
+        };
+      });
+    }
+
+    /* eslint-disable no-inner-declarations */
+    // eslint-disable-next-line react/display-name
+    const JBTextarea = React__default["default"].forwardRef((props, ref) => {
+        {
+            //we set this state so when ref change we have a render and our event listener will be updated
+            const [refChangeCount, refChangeCountSetter] = React.useState(0);
+            const element = React.useRef(null);
+            React.useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
+            React.useEffect(() => {
+                refChangeCountSetter(refChangeCount + 1);
+            }, [element.current]);
+            function onChange(e) {
+                if (props.onChange) {
+                    props.onChange(e);
+                }
+            }
+            function onKeydown(e) {
+                if (props.onKeydown) {
+                    props.onKeydown(e);
+                }
+            }
+            function onKeyup(e) {
+                if (props.onKeyup) {
+                    props.onKeyup(e);
+                }
+            }
+            function onFocus(e) {
+                if (props.onFocus && e instanceof FocusEvent) {
+                    props.onFocus(e);
+                }
+            }
+            function onBlur(e) {
+                if (props.onBlur && e instanceof FocusEvent) {
+                    props.onBlur(e);
+                }
+            }
+            React.useEffect(() => {
+                const value = props.value || '';
+                if (element.current) {
+                    element.current.value = value;
+                }
+            }, [props.value]);
+            React.useEffect(() => {
+                if (element.current) {
+                    element.current.validationList = props.validationList || [];
+                }
+            }, [props.validationList]);
+            React.useEffect(() => {
+                if (element.current) {
+                    element.current.autoHeight = props.autoHeight || false;
+                }
+            }, [props.autoHeight]);
+            useEvent(element.current, 'change', onChange);
+            useEvent(element.current, 'keydown', onKeydown);
+            useEvent(element.current, 'keyup', onKeyup);
+            useEvent(element.current, 'focus', onFocus);
+            useEvent(element.current, 'blur', onBlur);
+            return (React__default["default"].createElement("jb-textarea", { placeholder: props.placeholder, class: props.className, ref: element, label: props.label, message: props.message }));
+        }
+    });
+
+    exports.JBTextarea = JBTextarea;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=JBTextArea.umd.js.map

package/dist/JBTextArea.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JBTextArea.umd.js","sources":["../../custom-hooks/UseEvent.js","../lib/JBTextArea.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom, event, handler, passive = false) {\r\n    useEffect(() => {\r\n        if (dom) {\r\n            // initiate the event handler\r\n            dom.addEventListener(event, handler, passive); \r\n        }\r\n        // this will clean up the event every time the component is re-rendered\r\n        return function cleanup() {\r\n            if(dom){\r\n                dom.removeEventListener(event, handler, passive);\r\n            }\r\n        };\r\n    });\r\n}","/* eslint-disable no-inner-declarations */\r\nimport React, { useRef, useEffect, useImperativeHandle, useState } from 'react';\r\nimport 'jb-textarea';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport {JBTextareaValidationItem, JBTextareaWebComponent} from 'jb-textarea';\r\nimport { useEvent } from '../../custom-hooks/UseEvent';\r\n\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-textarea': JBTextareaType;\r\n      }\r\n      interface JBTextareaType extends React.DetailedHTMLProps<React.HTMLAttributes<JBTextareaWebComponent>, JBTextareaWebComponent> {\r\n        class?:string,\r\n        label?: string,\r\n        name?:string,\r\n        message?:string,\r\n        // ref:React.RefObject<JBDateInputWebComponent>,\r\n      }\r\n    }\r\n}\r\n// eslint-disable-next-line react/display-name\r\nconst JBTextarea = React.forwardRef((props:JBTextareaProps, ref) => {\r\n    {\r\n        //we set this state so when ref change we have a render and our event listener will be updated\r\n        const [refChangeCount , refChangeCountSetter] = useState(0);\r\n        const element = useRef<JBTextareaWebComponent>(null);\r\n        useImperativeHandle(\r\n            ref,\r\n            () => (element ? element.current : {}),\r\n            [element],\r\n        );\r\n        useEffect(()=>{\r\n            refChangeCountSetter(refChangeCount+1);\r\n        },[element.current]);\r\n        function onChange(e:JBTextareaEventType<Event>) {\r\n            if (props.onChange) {\r\n                props.onChange(e);\r\n            }\r\n        }\r\n        function onKeydown(e:JBTextareaEventType<KeyboardEvent>) {\r\n            if (props.onKeydown) {\r\n                props.onKeydown(e);\r\n            }\r\n        }\r\n        function onKeyup(e:JBTextareaEventType<KeyboardEvent>) {\r\n            if (props.onKeyup) {\r\n                props.onKeyup(e);\r\n            }\r\n        }\r\n        function onFocus(e:JBTextareaEventType<FocusEvent>) {\r\n            if (props.onFocus && e instanceof FocusEvent) {\r\n                props.onFocus(e);\r\n            }\r\n        }\r\n        function onBlur(e:JBTextareaEventType<FocusEvent>) {\r\n            if (props.onBlur && e instanceof FocusEvent) {\r\n                props.onBlur(e);\r\n            }\r\n        }\r\n        useEffect(() => {\r\n            const value:string = props.value || '';\r\n            if(element.current){\r\n                element.current.value = value;\r\n            }\r\n        }, [props.value]);\r\n\r\n        useEffect(() => {\r\n            if(element.current){\r\n                element.current.validationList = props.validationList || [];\r\n            }\r\n        }, [props.validationList]);\r\n\r\n        useEffect(() => {\r\n            if(element.current){\r\n                element.current.autoHeight = props.autoHeight || false;\r\n            }\r\n        }, [props.autoHeight]);\r\n        useEvent(element.current, 'change', onChange);\r\n        useEvent(element.current, 'keydown', onKeydown);\r\n        useEvent(element.current, 'keyup', onKeyup);\r\n        useEvent(element.current, 'focus', onFocus);\r\n        useEvent(element.current, 'blur', onBlur);\r\n        return (\r\n            <jb-textarea placeholder={props.placeholder} class={props.className} ref={element} label={props.label} message={props.message}></jb-textarea>\r\n        );\r\n    }\r\n});\r\nexport type JBTextareaEventType<T> = T & {\r\n    target: JBTextareaWebComponent\r\n}\r\ntype JBTextareaProps = {\r\n    label?: string,\r\n    value?: string,\r\n    onChange?: (e:JBTextareaEventType<Event>)=>void,\r\n    onFocus?:(e:JBTextareaEventType<FocusEvent>)=>void,\r\n    onBlur?:(e:JBTextareaEventType<FocusEvent>)=>void,\r\n    onKeydown?: (e:JBTextareaEventType<KeyboardEvent>)=>void,\r\n    onKeyup?: (e:JBTextareaEventType<KeyboardEvent>)=>void,\r\n    onInput?: (e:JBTextareaEventType<InputEvent>)=>void,\r\n    onBeforeinput?: (e:JBTextareaEventType<InputEvent>)=>void,\r\n    placeholder?:string,\r\n    className?: string,\r\n    validationList?:JBTextareaValidationItem[],\r\n    autoHeight?: boolean,\r\n    message?:string\r\n}\r\nexport {JBTextarea};"],"names":["useEvent","dom","event","handler","passive","arguments","length","undefined","useEffect","addEventListener","cleanup","removeEventListener","React","useState","useRef","useImperativeHandle"],"mappings":"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"}

package/dist/jb-textarea/lib/JBTextarea.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import 'jb-textarea';
+import { JBTextareaValidationItem, JBTextareaWebComponent } from 'jb-textarea';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'jb-textarea': JBTextareaType;
+        }
+        interface JBTextareaType extends React.DetailedHTMLProps<React.HTMLAttributes<JBTextareaWebComponent>, JBTextareaWebComponent> {
+            class?: string;
+            label?: string;
+            name?: string;
+            message?: string;
+        }
+    }
+}
+declare const JBTextarea: React.ForwardRefExoticComponent<JBTextareaProps & React.RefAttributes<unknown>>;
+export type JBTextareaEventType<T> = T & {
+    target: JBTextareaWebComponent;
+};
+type JBTextareaProps = {
+    label?: string;
+    value?: string;
+    onChange?: (e: JBTextareaEventType<Event>) => void;
+    onFocus?: (e: JBTextareaEventType<FocusEvent>) => void;
+    onBlur?: (e: JBTextareaEventType<FocusEvent>) => void;
+    onKeydown?: (e: JBTextareaEventType<KeyboardEvent>) => void;
+    onKeyup?: (e: JBTextareaEventType<KeyboardEvent>) => void;
+    onInput?: (e: JBTextareaEventType<InputEvent>) => void;
+    onBeforeinput?: (e: JBTextareaEventType<InputEvent>) => void;
+    placeholder?: string;
+    className?: string;
+    validationList?: JBTextareaValidationItem[];
+    autoHeight?: boolean;
+    message?: string;
+};
+export { JBTextarea };

package/index.js

@@ -0,0 +1 @@
+export {JBInput} from './dist/JBInput.js';

package/lib/JBTextarea.tsx

@@ -0,0 +1,109 @@
+/* eslint-disable no-inner-declarations */
+import React, { useRef, useEffect, useImperativeHandle, useState } from 'react';
+import 'jb-textarea';
+// eslint-disable-next-line no-duplicate-imports
+import {JBTextareaValidationItem, JBTextareaWebComponent} from 'jb-textarea';
+import { useEvent } from '../../custom-hooks/UseEvent';
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+      interface IntrinsicElements {
+        'jb-textarea': JBTextareaType;
+      }
+      interface JBTextareaType extends React.DetailedHTMLProps<React.HTMLAttributes<JBTextareaWebComponent>, JBTextareaWebComponent> {
+        class?:string,
+        label?: string,
+        name?:string,
+        message?:string,
+        // ref:React.RefObject<JBDateInputWebComponent>,
+      }
+    }
+}
+// eslint-disable-next-line react/display-name
+const JBTextarea = React.forwardRef((props:JBTextareaProps, ref) => {
+    {
+        //we set this state so when ref change we have a render and our event listener will be updated
+        const [refChangeCount , refChangeCountSetter] = useState(0);
+        const element = useRef<JBTextareaWebComponent>(null);
+        useImperativeHandle(
+            ref,
+            () => (element ? element.current : {}),
+            [element],
+        );
+        useEffect(()=>{
+            refChangeCountSetter(refChangeCount+1);
+        },[element.current]);
+        function onChange(e:JBTextareaEventType<Event>) {
+            if (props.onChange) {
+                props.onChange(e);
+            }
+        }
+        function onKeydown(e:JBTextareaEventType<KeyboardEvent>) {
+            if (props.onKeydown) {
+                props.onKeydown(e);
+            }
+        }
+        function onKeyup(e:JBTextareaEventType<KeyboardEvent>) {
+            if (props.onKeyup) {
+                props.onKeyup(e);
+            }
+        }
+        function onFocus(e:JBTextareaEventType<FocusEvent>) {
+            if (props.onFocus && e instanceof FocusEvent) {
+                props.onFocus(e);
+            }
+        }
+        function onBlur(e:JBTextareaEventType<FocusEvent>) {
+            if (props.onBlur && e instanceof FocusEvent) {
+                props.onBlur(e);
+            }
+        }
+        useEffect(() => {
+            const value:string = props.value || '';
+            if(element.current){
+                element.current.value = value;
+            }
+        }, [props.value]);
+
+        useEffect(() => {
+            if(element.current){
+                element.current.validationList = props.validationList || [];
+            }
+        }, [props.validationList]);
+
+        useEffect(() => {
+            if(element.current){
+                element.current.autoHeight = props.autoHeight || false;
+            }
+        }, [props.autoHeight]);
+        useEvent(element.current, 'change', onChange);
+        useEvent(element.current, 'keydown', onKeydown);
+        useEvent(element.current, 'keyup', onKeyup);
+        useEvent(element.current, 'focus', onFocus);
+        useEvent(element.current, 'blur', onBlur);
+        return (
+            <jb-textarea placeholder={props.placeholder} class={props.className} ref={element} label={props.label} message={props.message}></jb-textarea>
+        );
+    }
+});
+export type JBTextareaEventType<T> = T & {
+    target: JBTextareaWebComponent
+}
+type JBTextareaProps = {
+    label?: string,
+    value?: string,
+    onChange?: (e:JBTextareaEventType<Event>)=>void,
+    onFocus?:(e:JBTextareaEventType<FocusEvent>)=>void,
+    onBlur?:(e:JBTextareaEventType<FocusEvent>)=>void,
+    onKeydown?: (e:JBTextareaEventType<KeyboardEvent>)=>void,
+    onKeyup?: (e:JBTextareaEventType<KeyboardEvent>)=>void,
+    onInput?: (e:JBTextareaEventType<InputEvent>)=>void,
+    onBeforeinput?: (e:JBTextareaEventType<InputEvent>)=>void,
+    placeholder?:string,
+    className?: string,
+    validationList?:JBTextareaValidationItem[],
+    autoHeight?: boolean,
+    message?:string
+}
+export {JBTextarea};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "jb-textarea",
+  "description": "textarea react component",
+  "type": "module",
+  "author": {
+		"name": "mohammad javad bathaei",
+		"email": "javadbat@gmail.com"
+	},
+  "keywords": [
+    "jb",
+    "jb-textarea",
+    "textarea",
+    "long input",
+    "multiline input",
+    "react component"
+  ],
+  "version": "0.1.0",
+  "bugs": "https://github.com/javadbat/jb-textarea-react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "lib/",
+    "dist/"
+  ],
+  "main": "index.js",
+  "types": "./dist/jb-textarea/lib/JBTextarea.d.ts",
+  "repository": {
+		"type": "git",
+		"url": "git@github.com:javadbat/jb-textarea-react.git"
+  },
+  "dependencies": {
+    "jb-textarea": ">=2.1.0"
+  }
+}