react-html-parser icon indicating copy to clipboard operation
react-html-parser copied to clipboard

Does this support typescript?

Open paigeflourin opened this issue 7 years ago • 5 comments

I am getting this error on my typescript app.

[ts] Could not find a declaration file for module 'react-html-parser'. 'c:/Users/xxx/node_modules/react-html-parser/lib/index.js' implicitly has an 'any' type. Try npm install @types/react-html-parser if it exists or add a new declaration (.d.ts) file containing declare module 'react-html-parser';

paigeflourin avatar Nov 09 '18 09:11 paigeflourin

You can write your own definitions

/** @see https://github.com/wrakky/react-html-parser#arguments-1 */
type HtmlParserNode = {
  attribs: { [ name: string ]: string }
  name: string
  type: string
}

declare module "react-html-parser" {
  type NodeTransformer = (node: HtmlParserNode, index: number) => undefined | React.ReactElement<any>

  interface ParserOptions { transform: NodeTransformer }
  type Parser = (html: string, options: ParserOptions) => ReactNode[]
  const parser: Parser

  export default parser
}

I think that's right...

tills13 avatar Dec 02 '18 20:12 tills13

@tills13 options should be optional :)

type Parser = (html: string, options?: ParserOptions) => ReactNode[]

sarates avatar Jan 14 '19 13:01 sarates

I declared this module and it works for me:

declare module 'react-html-parser' {
    import { ReactElement } from 'react';

    export default function ReactHtmlParser(
        html: string,
        options?: {
            decodeEntities?: boolean;
            transform?: (
                node: {
                    type: string;
                    name: string;
                    children: any[];
                    next: any;
                    prev: any;
                    parent: any;
                    data: string;
                },
                index: number
            ) => ReactElement<any> | undefined | null;
            preprocessNodes?: (nodes: any) => any;
        }
    ): ReactElement<any>;
}

Feel free to contribute it to @types or include it in the library

borisyordanov avatar Jan 25 '19 10:01 borisyordanov

Sorry to butt in. I extended the type definition slightly, and thought I'd share it here.

declare module 'react-html-parser' {
    import { ReactElement } from 'react';

    interface Node {
      type: string;
      name: string;
      children: any[];
      next: any;
      prev: any;
      parent: any;
      data: string;
    }

    type TransformFunction = (
      node: Node,
      index: number
    ) => ReactElement<any> | undefined | null;

    export default function ReactHtmlParser(
      html: string,
      options?: {
        decodeEntities?: boolean;
        transform?: TransformFunction;
        preprocessNodes?: (nodes: any) => any;
      }
    ): ReactElement<any>;

    export function convertNodeToElement(
      node: Node,
      index: number,
      transform: TransformFunction
    ): ReactElement<any>;
}

thany avatar Nov 04 '19 16:11 thany

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/78c87986d7b31f751c4f96bbce065843b98b689b/types/react-html-parser/index.d.ts

types already exist in definitelyTyped

gagandeepgill avatar Jan 02 '20 21:01 gagandeepgill