react-autosize-textarea - npm Package Compare versions

Comparing version 6.0.0 to 7.0.0

CHANGELOG.md

@@ -5,2 +5,14 @@ #  Change Log
 
+## [v7.0.0](https://github.com/buildo/react-autosize-textarea/tree/v7.0.0) (2019-03-26)
+[Full Changelog](https://github.com/buildo/react-autosize-textarea/compare/v6.0.0...v7.0.0)
+
+#### Fixes (bugs & defects):
+
+- onResize types are wrong [#119](https://github.com/buildo/react-autosize-textarea/issues/119)
+- onResize not called if passed when component already mounted [#118](https://github.com/buildo/react-autosize-textarea/issues/118)
+
+#### Breaking:
+
+- Support for React.createRef() refs passed to innerRef [#102](https://github.com/buildo/react-autosize-textarea/issues/102)
+
 ## [v6.0.0](https://github.com/buildo/react-autosize-textarea/tree/v6.0.0) (2018-12-06)
@@ -7,0 +19,0 @@ [Full Changelog](https://github.com/buildo/react-autosize-textarea/compare/v5.0.1...v6.0.0)

examples/Examples.md

@@ -67,1 +67,25 @@ ### Examples
 ```
+
+#### Inner ref
+
+```js
+initialState = {
+  value: '',
+  /*
+    Saving the "ref" in the state is a bad practice: you should use a `const` or a class property.
+    We're doing it as it's the only way we have to avoid
+    resetting it to "React.createRef()" at every render
+  */
+  ref: React.createRef()
+};
+
+<div>
+  <TextareaAutosize
+    value={state.value}
+    onChange={e => setState({ value: e.target.value })}
+    placeholder="try writing some lines"
+    ref={state.ref}
+  />
+  {state.ref.current && <div>The textarea contains: {state.ref.current.value}</div>}
+</div>
+```

lib/index.d.ts

@@ -1,2 +0,2 @@
-import { TextareaAutosize } from './TextareaAutosize';
+import { TextareaAutosize } from "./TextareaAutosize";
 export default TextareaAutosize;

lib/TextareaAutosize.d.ts

@@ -1,13 +0,10 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import * as React from "react";
 export declare namespace TextareaAutosize {
-    type RequiredProps = Pick<React.HTMLProps<HTMLTextAreaElement>, Exclude<keyof React.HTMLProps<HTMLTextAreaElement>, 'ref'>> & {
+    type RequiredProps = Pick<React.HTMLProps<HTMLTextAreaElement>, Exclude<keyof React.HTMLProps<HTMLTextAreaElement>, "ref">> & {
         /** Called whenever the textarea resizes */
-        onResize?: (e: React.SyntheticEvent<Event>) => void;
+        onResize?: (e: Event) => void;
         /** Minimum number of visible rows */
-        rows?: React.HTMLProps<HTMLTextAreaElement>['rows'];
+        rows?: React.HTMLProps<HTMLTextAreaElement>["rows"];
         /** Maximum number of visible rows */
         maxRows?: number;
-        /** Called with the ref to the DOM node */
-        innerRef?: (textarea: HTMLTextAreaElement) => void;
         /** Initialize `autosize` asynchronously.
@@ -28,317 +25,14 @@ * Enable it if you are using StyledComponents
 }
-declare type EventType = 'autosize:update' | 'autosize:destroy' | 'autosize:resized';
-/**
- * A light replacement for built-in textarea component
- * which automaticaly adjusts its height to match the content
- */
-export declare class TextareaAutosize extends React.Component<TextareaAutosize.Props, TextareaAutosize.State> {
-    static defaultProps: TextareaAutosize.DefaultProps;
-    static propTypes: {
-        [key in keyof TextareaAutosize.Props]: PropTypes.Requireable<any>;
-    };
-    state: {
-        lineHeight: null;
-    };
-    textarea: HTMLTextAreaElement;
-    currentValue: TextareaAutosize.Props['value'];
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    dispatchEvent: (EVENT_TYPE: EventType) => void;
-    updateLineHeight: () => void;
-    onChange: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
-    saveDOMNodeRef: (ref: HTMLTextAreaElement) => void;
-    getLocals: () => {
-        saveDOMNodeRef: (ref: HTMLTextAreaElement) => void;
-        style: React.CSSProperties | undefined;
-        onChange: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
-        children?: React.ReactNode;
-        default?: boolean | undefined;
-        max?: string | number | undefined;
-        required?: boolean | undefined;
-        media?: string | undefined;
-        hidden?: boolean | undefined;
-        cite?: string | undefined;
-        data?: string | undefined;
-        dir?: string | undefined;
-        form?: string | undefined;
-        label?: string | undefined;
-        slot?: string | undefined;
-        span?: number | undefined;
-        title?: string | undefined;
-        pattern?: string | undefined;
-        async?: boolean | undefined;
-        start?: number | undefined;
-        low?: number | undefined;
-        high?: number | undefined;
-        defer?: boolean | undefined;
-        open?: boolean | undefined;
-        disabled?: boolean | undefined;
-        summary?: string | undefined;
-        wrap?: string | undefined;
-        accept?: string | undefined;
-        acceptCharset?: string | undefined;
-        action?: string | undefined;
-        allowFullScreen?: boolean | undefined;
-        allowTransparency?: boolean | undefined;
-        alt?: string | undefined;
-        as?: string | undefined;
-        autoComplete?: string | undefined;
-        autoFocus?: boolean | undefined;
-        autoPlay?: boolean | undefined;
-        capture?: boolean | undefined;
-        cellPadding?: string | number | undefined;
-        cellSpacing?: string | number | undefined;
-        charSet?: string | undefined;
-        challenge?: string | undefined;
-        checked?: boolean | undefined;
-        classID?: string | undefined;
-        cols?: number | undefined;
-        colSpan?: number | undefined;
-        content?: string | undefined;
-        controls?: boolean | undefined;
-        coords?: string | undefined;
-        crossOrigin?: string | undefined;
-        dateTime?: string | undefined;
-        download?: any;
-        encType?: string | undefined;
-        formAction?: string | undefined;
-        formEncType?: string | undefined;
-        formMethod?: string | undefined;
-        formNoValidate?: boolean | undefined;
-        formTarget?: string | undefined;
-        frameBorder?: string | number | undefined;
-        headers?: string | undefined;
-        height?: string | number | undefined;
-        href?: string | undefined;
-        hrefLang?: string | undefined;
-        htmlFor?: string | undefined;
-        httpEquiv?: string | undefined;
-        integrity?: string | undefined;
-        keyParams?: string | undefined;
-        keyType?: string | undefined;
-        kind?: string | undefined;
-        list?: string | undefined;
-        loop?: boolean | undefined;
-        manifest?: string | undefined;
-        marginHeight?: number | undefined;
-        marginWidth?: number | undefined;
-        maxLength?: number | undefined;
-        mediaGroup?: string | undefined;
-        method?: string | undefined;
-        min?: string | number | undefined;
-        minLength?: number | undefined;
-        multiple?: boolean | undefined;
-        muted?: boolean | undefined;
-        name?: string | undefined;
-        nonce?: string | undefined;
-        noValidate?: boolean | undefined;
-        optimum?: number | undefined;
-        placeholder?: string | undefined;
-        playsInline?: boolean | undefined;
-        poster?: string | undefined;
-        preload?: string | undefined;
-        readOnly?: boolean | undefined;
-        rel?: string | undefined;
-        reversed?: boolean | undefined;
-        rows?: number | undefined;
-        rowSpan?: number | undefined;
-        sandbox?: string | undefined;
-        scope?: string | undefined;
-        scoped?: boolean | undefined;
-        scrolling?: string | undefined;
-        seamless?: boolean | undefined;
-        selected?: boolean | undefined;
-        shape?: string | undefined;
-        size?: number | undefined;
-        sizes?: string | undefined;
-        src?: string | undefined;
-        srcDoc?: string | undefined;
-        srcLang?: string | undefined;
-        srcSet?: string | undefined;
-        step?: string | number | undefined;
-        target?: string | undefined;
-        type?: string | undefined;
-        useMap?: string | undefined;
-        value?: string | number | string[] | undefined;
-        width?: string | number | undefined;
-        wmode?: string | undefined;
-        defaultChecked?: boolean | undefined;
-        defaultValue?: string | string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined;
-        accessKey?: string | undefined;
-        className?: string | undefined;
-        contentEditable?: boolean | undefined;
-        contextMenu?: string | undefined;
-        draggable?: boolean | undefined;
-        id?: string | undefined;
-        lang?: string | undefined;
-        spellCheck?: boolean | undefined;
-        tabIndex?: number | undefined;
-        inputMode?: string | undefined;
-        is?: string | undefined;
-        radioGroup?: string | undefined;
-        role?: string | undefined;
-        about?: string | undefined;
-        datatype?: string | undefined;
-        inlist?: any;
-        prefix?: string | undefined;
-        property?: string | undefined;
-        resource?: string | undefined;
-        typeof?: string | undefined;
-        vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
-        autoCorrect?: string | undefined;
-        autoSave?: string | undefined;
-        color?: string | undefined;
-        itemProp?: string | undefined;
-        itemScope?: boolean | undefined;
-        itemType?: string | undefined;
-        itemID?: string | undefined;
-        itemRef?: string | undefined;
-        results?: number | undefined;
-        security?: string | undefined;
-        unselectable?: boolean | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string;
-        } | undefined;
-        onCopy?: ((event: React.ClipboardEvent<HTMLTextAreaElement>) => void) | undefined;
-        onCopyCapture?: ((event: React.ClipboardEvent<HTMLTextAreaElement>) => void) | undefined;
-        onCut?: ((event: React.ClipboardEvent<HTMLTextAreaElement>) => void) | undefined;
-        onCutCapture?: ((event: React.ClipboardEvent<HTMLTextAreaElement>) => void) | undefined;
-        onPaste?: ((event: React.ClipboardEvent<HTMLTextAreaElement>) => void) | undefined;
-        onPasteCapture?: ((event: React.ClipboardEvent<HTMLTextAreaElement>) => void) | undefined;
-        onCompositionEnd?: ((event: React.CompositionEvent<HTMLTextAreaElement>) => void) | undefined;
-        onCompositionEndCapture?: ((event: React.CompositionEvent<HTMLTextAreaElement>) => void) | undefined;
-        onCompositionStart?: ((event: React.CompositionEvent<HTMLTextAreaElement>) => void) | undefined;
-        onCompositionStartCapture?: ((event: React.CompositionEvent<HTMLTextAreaElement>) => void) | undefined;
-        onCompositionUpdate?: ((event: React.CompositionEvent<HTMLTextAreaElement>) => void) | undefined;
-        onCompositionUpdateCapture?: ((event: React.CompositionEvent<HTMLTextAreaElement>) => void) | undefined;
-        onFocus?: ((event: React.FocusEvent<HTMLTextAreaElement>) => void) | undefined;
-        onFocusCapture?: ((event: React.FocusEvent<HTMLTextAreaElement>) => void) | undefined;
-        onBlur?: ((event: React.FocusEvent<HTMLTextAreaElement>) => void) | undefined;
-        onBlurCapture?: ((event: React.FocusEvent<HTMLTextAreaElement>) => void) | undefined;
-        onChangeCapture?: ((event: React.FormEvent<HTMLTextAreaElement>) => void) | undefined;
-        onInput?: ((event: React.FormEvent<HTMLTextAreaElement>) => void) | undefined;
-        onInputCapture?: ((event: React.FormEvent<HTMLTextAreaElement>) => void) | undefined;
-        onReset?: ((event: React.FormEvent<HTMLTextAreaElement>) => void) | undefined;
-        onResetCapture?: ((event: React.FormEvent<HTMLTextAreaElement>) => void) | undefined;
-        onSubmit?: ((event: React.FormEvent<HTMLTextAreaElement>) => void) | undefined;
-        onSubmitCapture?: ((event: React.FormEvent<HTMLTextAreaElement>) => void) | undefined;
-        onInvalid?: ((event: React.FormEvent<HTMLTextAreaElement>) => void) | undefined;
-        onInvalidCapture?: ((event: React.FormEvent<HTMLTextAreaElement>) => void) | undefined;
-        onLoad?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onLoadCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onError?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onErrorCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onKeyDown?: ((event: React.KeyboardEvent<HTMLTextAreaElement>) => void) | undefined;
-        onKeyDownCapture?: ((event: React.KeyboardEvent<HTMLTextAreaElement>) => void) | undefined;
-        onKeyPress?: ((event: React.KeyboardEvent<HTMLTextAreaElement>) => void) | undefined;
-        onKeyPressCapture?: ((event: React.KeyboardEvent<HTMLTextAreaElement>) => void) | undefined;
-        onKeyUp?: ((event: React.KeyboardEvent<HTMLTextAreaElement>) => void) | undefined;
-        onKeyUpCapture?: ((event: React.KeyboardEvent<HTMLTextAreaElement>) => void) | undefined;
-        onAbort?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onAbortCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onCanPlay?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onCanPlayCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onCanPlayThrough?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onCanPlayThroughCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDurationChange?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDurationChangeCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onEmptied?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onEmptiedCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onEncrypted?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onEncryptedCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onEnded?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onEndedCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onLoadedData?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onLoadedDataCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onLoadedMetadata?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onLoadedMetadataCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onLoadStart?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onLoadStartCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onPause?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onPauseCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onPlay?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onPlayCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onPlaying?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onPlayingCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onProgress?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onProgressCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onRateChange?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onRateChangeCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onSeeked?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onSeekedCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onSeeking?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onSeekingCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onStalled?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onStalledCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onSuspend?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onSuspendCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onTimeUpdate?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onTimeUpdateCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onVolumeChange?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onVolumeChangeCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onWaiting?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onWaitingCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onClick?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onClickCapture?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onContextMenu?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onContextMenuCapture?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDoubleClick?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDoubleClickCapture?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDrag?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDragCapture?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDragEnd?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDragEndCapture?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDragEnter?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDragEnterCapture?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDragExit?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDragExitCapture?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDragLeave?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDragLeaveCapture?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDragOver?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDragOverCapture?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDragStart?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDragStartCapture?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDrop?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onDropCapture?: ((event: React.DragEvent<HTMLTextAreaElement>) => void) | undefined;
-        onMouseDown?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onMouseDownCapture?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onMouseEnter?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onMouseLeave?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onMouseMove?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onMouseMoveCapture?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onMouseOut?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onMouseOutCapture?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onMouseOver?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onMouseOverCapture?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onMouseUp?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onMouseUpCapture?: ((event: React.MouseEvent<HTMLTextAreaElement>) => void) | undefined;
-        onSelect?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onSelectCapture?: ((event: React.SyntheticEvent<HTMLTextAreaElement>) => void) | undefined;
-        onTouchCancel?: ((event: React.TouchEvent<HTMLTextAreaElement>) => void) | undefined;
-        onTouchCancelCapture?: ((event: React.TouchEvent<HTMLTextAreaElement>) => void) | undefined;
-        onTouchEnd?: ((event: React.TouchEvent<HTMLTextAreaElement>) => void) | undefined;
-        onTouchEndCapture?: ((event: React.TouchEvent<HTMLTextAreaElement>) => void) | undefined;
-        onTouchMove?: ((event: React.TouchEvent<HTMLTextAreaElement>) => void) | undefined;
-        onTouchMoveCapture?: ((event: React.TouchEvent<HTMLTextAreaElement>) => void) | undefined;
-        onTouchStart?: ((event: React.TouchEvent<HTMLTextAreaElement>) => void) | undefined;
-        onTouchStartCapture?: ((event: React.TouchEvent<HTMLTextAreaElement>) => void) | undefined;
-        onScroll?: ((event: React.UIEvent<HTMLTextAreaElement>) => void) | undefined;
-        onScrollCapture?: ((event: React.UIEvent<HTMLTextAreaElement>) => void) | undefined;
-        onWheel?: ((event: React.WheelEvent<HTMLTextAreaElement>) => void) | undefined;
-        onWheelCapture?: ((event: React.WheelEvent<HTMLTextAreaElement>) => void) | undefined;
-        onAnimationStart?: ((event: React.AnimationEvent<HTMLTextAreaElement>) => void) | undefined;
-        onAnimationStartCapture?: ((event: React.AnimationEvent<HTMLTextAreaElement>) => void) | undefined;
-        onAnimationEnd?: ((event: React.AnimationEvent<HTMLTextAreaElement>) => void) | undefined;
-        onAnimationEndCapture?: ((event: React.AnimationEvent<HTMLTextAreaElement>) => void) | undefined;
-        onAnimationIteration?: ((event: React.AnimationEvent<HTMLTextAreaElement>) => void) | undefined;
-        onAnimationIterationCapture?: ((event: React.AnimationEvent<HTMLTextAreaElement>) => void) | undefined;
-        onTransitionEnd?: ((event: React.TransitionEvent<HTMLTextAreaElement>) => void) | undefined;
-        onTransitionEndCapture?: ((event: React.TransitionEvent<HTMLTextAreaElement>) => void) | undefined;
-        key?: string | number | undefined;
-    };
-    render(): JSX.Element;
-    componentDidUpdate(): void;
-}
-export {};
+export declare const TextareaAutosize: React.ForwardRefExoticComponent<Pick<React.HTMLProps<HTMLTextAreaElement>, "default" | "max" | "required" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "title" | "pattern" | "async" | "start" | "low" | "high" | "defer" | "open" | "disabled" | "color" | "content" | "size" | "wrap" | "multiple" | "summary" | "key" | "children" | "list" | "step" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "name" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    /** Called whenever the textarea resizes */
+    onResize?: ((e: Event) => void) | undefined;
+    /** Minimum number of visible rows */
+    rows?: number | undefined;
+    /** Maximum number of visible rows */
+    maxRows?: number | undefined;
+    /** Initialize `autosize` asynchronously.
+     * Enable it if you are using StyledComponents
+     * This is forced to true when `maxRows` is set.
+     */
+    async?: boolean | undefined;
+} & Partial<TextareaAutosize.DefaultProps> & React.RefAttributes<HTMLTextAreaElement>>;

lib/TextareaAutosize.js

@@ -35,5 +35,3 @@ "use strict";
 var getLineHeight = _getLineHeight;
-var UPDATE = 'autosize:update';
-var DESTROY = 'autosize:destroy';
-var RESIZED = 'autosize:resized';
+var RESIZED = "autosize:resized";
 /**
@@ -43,5 +41,5 @@ * A light replacement for built-in textarea component
  */
-var TextareaAutosize = /** @class */ (function (_super) {
-    __extends(TextareaAutosize, _super);
-    function TextareaAutosize() {
+var TextareaAutosizeClass = /** @class */ (function (_super) {
+    __extends(TextareaAutosizeClass, _super);
+    function TextareaAutosizeClass() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -51,22 +49,14 @@ _this.state = {
         };
-        _this.dispatchEvent = function (EVENT_TYPE) {
-            switch (EVENT_TYPE) {
-                case UPDATE:
-                    autosize.update(_this.textarea);
-                    break;
-                case DESTROY:
-                    autosize.destroy(_this.textarea);
-                    break;
-                case RESIZED:
-                    var event_1 = document.createEvent('Event');
-                    event_1.initEvent(RESIZED, true, false);
-                    _this.textarea.dispatchEvent(event_1);
-                default:
-                    break;
+        _this.textarea = _this.props.innerRef || React.createRef();
+        _this.onResize = function (e) {
+            if (_this.props.onResize) {
+                _this.props.onResize(e);
             }
         };
         _this.updateLineHeight = function () {
-            _this.setState({
-                lineHeight: getLineHeight(_this.textarea)
-            });
+            if (_this.textarea.current) {
+                _this.setState({
+                    lineHeight: getLineHeight(_this.textarea.current)
+                });
+            }
         };
@@ -78,20 +68,8 @@ _this.onChange = function (e) {
         };
-        _this.saveDOMNodeRef = function (ref) {
-            var innerRef = _this.props.innerRef;
-            if (innerRef) {
-                innerRef(ref);
-            }
-            _this.textarea = ref;
-        };
-        _this.getLocals = function () {
-            var _a = _this, _b = _a.props, onResize = _b.onResize, maxRows = _b.maxRows, onChange = _b.onChange, style = _b.style, innerRef = _b.innerRef, props = __rest(_b, ["onResize", "maxRows", "onChange", "style", "innerRef"]), lineHeight = _a.state.lineHeight, saveDOMNodeRef = _a.saveDOMNodeRef;
-            var maxHeight = maxRows && lineHeight ? lineHeight * maxRows : null;
-            return __assign({}, props, { saveDOMNodeRef: saveDOMNodeRef, style: maxHeight ? __assign({}, style, { maxHeight: maxHeight }) : style, onChange: _this.onChange });
-        };
         return _this;
     }
-    TextareaAutosize.prototype.componentDidMount = function () {
+    TextareaAutosizeClass.prototype.componentDidMount = function () {
         var _this = this;
-        var _a = this.props, onResize = _a.onResize, maxRows = _a.maxRows, async = _a.async;
-        if (typeof maxRows === 'number') {
+        var _a = this.props, maxRows = _a.maxRows, async = _a.async;
+        if (typeof maxRows === "number") {
             this.updateLineHeight();
@@ -105,38 +83,40 @@ }
             */
-            setTimeout(function () { return autosize(_this.textarea); });
+            setTimeout(function () { return _this.textarea.current && autosize(_this.textarea.current); });
         }
         else {
-            autosize(this.textarea);
+            this.textarea.current && autosize(this.textarea.current);
         }
-        if (onResize) {
-            this.textarea.addEventListener(RESIZED, onResize);
+        if (this.textarea.current) {
+            this.textarea.current.addEventListener(RESIZED, this.onResize);
         }
     };
-    TextareaAutosize.prototype.componentWillUnmount = function () {
-        var onResize = this.props.onResize;
-        if (onResize) {
-            this.textarea.removeEventListener(RESIZED, onResize);
+    TextareaAutosizeClass.prototype.componentWillUnmount = function () {
+        if (this.textarea.current) {
+            this.textarea.current.removeEventListener(RESIZED, this.onResize);
+            autosize.destroy(this.textarea.current);
         }
-        this.dispatchEvent(DESTROY);
     };
-    TextareaAutosize.prototype.render = function () {
-        var _a = this.getLocals(), children = _a.children, saveDOMNodeRef = _a.saveDOMNodeRef, locals = __rest(_a, ["children", "saveDOMNodeRef"]);
-        return (React.createElement("textarea", __assign({}, locals, { ref: saveDOMNodeRef }), children));
+    TextareaAutosizeClass.prototype.render = function () {
+        var _a = this, _b = _a.props, onResize = _b.onResize, maxRows = _b.maxRows, onChange = _b.onChange, style = _b.style, innerRef = _b.innerRef, children = _b.children, props = __rest(_b, ["onResize", "maxRows", "onChange", "style", "innerRef", "children"]), lineHeight = _a.state.lineHeight;
+        var maxHeight = maxRows && lineHeight ? lineHeight * maxRows : null;
+        return (React.createElement("textarea", __assign({}, props, { onChange: this.onChange, style: maxHeight ? __assign({}, style, { maxHeight: maxHeight }) : style, ref: this.textarea }), children));
     };
-    TextareaAutosize.prototype.componentDidUpdate = function () {
-        this.dispatchEvent(UPDATE);
+    TextareaAutosizeClass.prototype.componentDidUpdate = function () {
+        this.textarea.current && autosize.update(this.textarea.current);
     };
-    TextareaAutosize.defaultProps = {
+    TextareaAutosizeClass.defaultProps = {
         rows: 1,
         async: false
     };
-    TextareaAutosize.propTypes = {
+    TextareaAutosizeClass.propTypes = {
         rows: PropTypes.number,
         maxRows: PropTypes.number,
         onResize: PropTypes.func,
-        innerRef: PropTypes.func,
+        innerRef: PropTypes.object,
         async: PropTypes.bool
     };
-    return TextareaAutosize;
+    return TextareaAutosizeClass;
 }(React.Component));
-exports.TextareaAutosize = TextareaAutosize;
+exports.TextareaAutosize = React.forwardRef(function (props, ref) {
+    return React.createElement(TextareaAutosizeClass, __assign({}, props, { innerRef: ref }));
+});

package.json

 {
   "name": "react-autosize-textarea",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "replacement for built-in textarea which auto resizes itself",
@@ -48,3 +48,4 @@ "main": "lib",
     "@types/prop-types": "15.5.2",
-    "@types/react": "16.0.30",
+    "@types/react": "^16.8.1",
+    "@types/react-dom": "^16.0.11",
     "babel-loader": "^7.1.2",
@@ -51,0 +52,0 @@ "babel-preset-buildo": "^0.1.1",

src/index.ts

@@ -1,2 +0,2 @@
-import { TextareaAutosize } from './TextareaAutosize';
+import { TextareaAutosize } from "./TextareaAutosize";
 export default TextareaAutosize;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

39079

decreased by-25.86%

Dev dependency count

28

increased by3.7%

Lines of code

328

decreased by-48.35%

No dependency changes