Type definitions for this package

[moj-dario]

Any chance you could add type definitions to this package?
https://github.com/DefinitelyTyped/DefinitelyTyped

[VojtechVidra]

I would appreciate it as well

[satorioh]

I had the same problem when using typescript, need it as well

[koprivajakub]

It would be very useful to have the typings :+1

[xiaody]

I'm not familiar with typed React. PR would be very welcomed.

[digitalkaoz]

i started with this (not complete):

declare module "react-lines-ellipsis" {
  type ExpandCollapseProps = {
    text: string;
    maxLine: Number;
    component?: string;
    onClick?: Function;
    basedOn?: string;
    ellipsis?: string;
  };

  declare class ExpandCollapse extends React.Component<ExpandCollapseProps> {}

  export default ExpandCollapse;
}

anybody feel free to continue and add all props

[satorioh]

@digitalkaoz
I also write a definitions below:

declare module 'react-lines-ellipsis' {
    import * as React from 'react';

    interface ReactLinesEllipsisProps {
        /** Split by letters or words. By default it uses a guess based on your text **/
        basedOn?: 'letters' | 'words';
        className?: string;
        /** The tagName of the rendered node. Default div **/
        component?: string;
        /** Text content of the ellipsis. Default … **/
        ellipsis?: string;
        /** Max count of lines allowed. Default 1 **/
        maxLine?: number | string;
        /** Callback function invoked when the reflow logic complete **/
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        onReflow?: ({ clamped, text }: { clamped: boolean; text: string }) => any;
        /** The text you want to clamp **/
        text?: string;
        /** Trim right the clamped text to avoid putting the ellipsis on an empty line. Default true **/
        trimRight?: boolean;
        /** for the HOC **/
        winWidth?: number;
        /** Is the text content clamped **/
        isClamped?: () => boolean;
    }

    class LinesEllipsis extends React.Component<ReactLinesEllipsisProps> {
        static defaultProps?: ReactLinesEllipsisProps;
    }

    export default LinesEllipsis;
}

and import in my file:
import * as LinesEllipsis from 'react-lines-ellipsis'

but then I got ts2604 error, not sure why this happened

[satorioh]

@digitalkaoz
I also write a definitions below:

declare module 'react-lines-ellipsis' {
    import * as React from 'react';

    interface ReactLinesEllipsisProps {
        /** Split by letters or words. By default it uses a guess based on your text **/
        basedOn?: 'letters' | 'words';
        className?: string;
        /** The tagName of the rendered node. Default div **/
        component?: string;
        /** Text content of the ellipsis. Default … **/
        ellipsis?: string;
        /** Max count of lines allowed. Default 1 **/
        maxLine?: number | string;
        /** Callback function invoked when the reflow logic complete **/
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        onReflow?: ({ clamped, text }: { clamped: boolean; text: string }) => any;
        /** The text you want to clamp **/
        text?: string;
        /** Trim right the clamped text to avoid putting the ellipsis on an empty line. Default true **/
        trimRight?: boolean;
        /** for the HOC **/
        winWidth?: number;
        /** Is the text content clamped **/
        isClamped?: () => boolean;
    }

    class LinesEllipsis extends React.Component<ReactLinesEllipsisProps> {
        static defaultProps?: ReactLinesEllipsisProps;
    }

    export default LinesEllipsis;
}

and import in my file:
import * as LinesEllipsis from 'react-lines-ellipsis'

but then I got ts2604 error, not sure why this happened

After two options enabled in tsconfig.json, the error had gone, everything is ok now
Here is my change:

"compilerOptions": {
    ...
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
}

[keithort]

I built on the above and came up with this as I also needed to use the responsive HOC. Make sure you add the folder for the declaration file to your tsconfig. Hope this helps somebody in the future.

// tsconfig.json
{
  "compilierOptions": {
    ...
    "typeRoots": ["./node_modules/@types", "./src/@types"]
  }
}

// /src/@types/react-lines-ellipsis/index.d.ts
declare module "react-lines-ellipsis" {
  import * as React from "react";

  interface ReactLinesEllipsisProps {
    basedOn?: "letters" | "words";
    className?: string;
    component?: string;
    ellipsis?: string;
    isClamped?: () => boolean;
    maxLine?: number | string;
    onReflow?: ({ clamped, text }: { clamped: boolean; text: string }) => any;
    style?: React.CSSProperties;
    text?: string;
    trimRight?: boolean;
    winWidth?: number;
  }

  class LinesEllipsis extends React.Component<ReactLinesEllipsisProps> {
    static defaultProps?: ReactLinesEllipsisProps;
  }

  export default LinesEllipsis;
}

declare module "react-lines-ellipsis/lib/responsiveHOC" {
  import * as React from "react";

  export default function responsiveHOC(): <P>(
    WrappedComponent: React.ComponentType<P>,
  ) => React.ComponentClass<P>;
}

[jay-khatri]

@keithort,this works for me! @xiaody / @keithort , can we arrange this to be merged as a PR? If not, maybe a DefinitelyTyped entry? https://github.com/DefinitelyTyped/DefinitelyTyped

(I'm happy to help out in either situation)

[keithort]

@keithort,this works for me! @xiaody / @keithort , can we arrange this to be merged as a PR? If not, maybe a DefinitelyTyped entry? https://github.com/DefinitelyTyped/DefinitelyTyped

(I'm happy to help out in either situation)

Feel free to.

[angeloaltamiranom]

I made a DefinitelyTyped PR: DefinitelyTyped/DefinitelyTyped#56523
Feel free to review it and suggest changes if necessary. From my testing, it works fine.

Edit: PR is merged

[monolithed]

testing

@angeloaltamiranom, it seems you forgot to add the text property for LinesEllipsisLoose

[mattqs]

For anyone who wants to import the types:

npm install --save @types/react-lines-ellipsis

[Omar-Khaledd]

Hey guys, when using the typed package, I'm not able to pass an HTML element to the ellipsis props as the example in the following link did: https://www.cluemediator.com/truncate-text-in-react-using-react-lines-ellipsis
Can any one help here?