react-highlight icon indicating copy to clipboard operation
react-highlight copied to clipboard

TypeScript declaration module file [WIP]

Open Bopzor opened this issue 4 years ago • 0 comments

Hello.

Thanks for your work. I just started to use your lib today, and because I'm using TypeScript, I made this:

// highlightable.d.ts

declare module 'highlightable' {
  import { CSSProperties } from 'react';

  export class Range {
    start: number;
    end: number;
    text: string;
    data: HighlightableProps;

    constructor(start: number, end: number, text: string, data: Partial<HighlightableProps>);
  }

  export interface HighlightableProps {
    ranges: Range[];
    text: string;
    enabled: boolean;
    onMouseOverHighlightedWord?: (range: Range) => void;
    onTextHighlighted: (range: Range) => void;
    highlightStyle?: CSSProperties;
    rangeRenderer?: (
      currentRenderedNodes: string,
      currentRenderedRange: Range,
      currentRenderedIndex: number,
      onMouseOverHighlightedWord: (range: Range) => void,
    ) => React.ReactNode;
  }

  export default function Highlightable(props: HighlightableProps): JSX.Element;
}


I'm not an expert in TypeScript, particularly making those declaration types file (it's new to me), but maybe it could help others to use your lib with TypeScript.

If anyone notice an error, or an amelioration, please let me know. I will try to update this comment to keep it up-to-date :)


[EDIT]

(12/09/2021): Replace Range interface with a class to match implementation

Bopzor avatar Sep 11 '21 15:09 Bopzor