Sorry，but how to use mergely in a react project?

[wickedest]

Hi @ICZhuang, here is a codepen do demonstrate how to use Mergely with React. Note that it requires jQuery at the moment.

[liuweiming1997]

I also wonder. Actually I am using typescript, it there any demo code for the begginer?

[wickedest]

no, there is no specific demo for using mergely with a typescript project, but you can try this.

[liuweiming1997]

Correct me if I am wrong. we can try to use this .d.ts (maybe some props i forget to write)

declare module 'mergely-react' {
    import { Component } from 'react';

    interface MergelyViewProps {
        autoupdate?: boolean;
        autoresize?: boolean;
        bgcolor?: string;
        change_timeout?: number;
        cmsettings?: object;
        ignorews?: boolean;
        ignorecase?: boolean;
        ignoreaccents?: boolean;
        lcs?: boolean;
        lhs: string | null | (() => void);
        license?: string;
        line_numbers?: boolean;
        lhs_cmsettings?: object;
        resize_timeout?: number;
        rhs: string | null | (() => void);
        rhs_cmsettings?: object;
        rhs_margin?: 'right' | 'left';
        sidebar?: boolean;
        vpcolor?: string;
        viewport?: boolean;
        wrap_lines?: boolean;
        height?: string;
        updated?: () => void;
        onUpdated?: () => void;
        onChanged?: () => void;
    }

    export default class MergelyView extends Component<MergelyViewProps> {
        setValue: (side: 'lhs' | 'rhs', value: string) => void;
        getValue: (side: 'lhs' | 'rhs') => string;
        merge: () => void;
        getEditor: (side: 'lhs' | 'rhs') => any;
        unmerge: () => void;
        reload: () => void;
    }
}