Definitelytyped: Problem with react-copy-to-clipboard

[vaske]

I tried using the @types/react-copy-to-clipboard package and had problems.
JSX element type 'CopyToClipboard' does not have any construct or call signatures.

I imported it as

import * as CopyToClipboard from 'react-copy-to-clipboard';

and then use as

                <CopyToClipboard
                    // type='text'
                    text={ this.state.value ? this.state.value : '' }
                    onCopy={ () => this.setState({copied: true}) }
                >
                    <span>test</span>
                </CopyToClipboard>

What we should do to avoid such issue?

Authors: @mabels and @BernabeFelix

[Bernabe-Felix]

@vaske have you imported CopyToClioboard as import CopyToClipboard from 'react-copy-to-clipboard'?

[vaske]

@Bernabe-Felix with that I'm getting error as well, like there is no export name like that, etc...

[BernabeFelix]

got it, could you please paste you code implementation to have more context

On Mon, Apr 30, 2018 at 9:43 AM, Milan Vasic [e-mail]
wrote:

@Bernabe-Felix https://github.com/Bernabe-Felix with that I'm getting
error as well, like there is no export name like that, etc...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/25414#issuecomment-385419785,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHbfm3ffrbJpnUOvkcVkld4o3BkEkPunks5ttyMTgaJpZM4TsbLq
.

[vaske]

Well nothing specific, just import and then in render I call CopyToClipboard as I mentioned in main comment.

[BernabeFelix]

I couldn't replicate it, so I think is the implementation and I'd like to
discard it

On Mon, Apr 30, 2018 at 9:50 AM, Milan Vasic [e-mail]
wrote:

Well nothing specific, just import and then in render I call
CopyToClipboard as I mentioned in main comment.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/25414#issuecomment-385422099,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHbfm0PsSRt-3eybU41Dsbp7QVVZ0e0yks5ttyTEgaJpZM4TsbLq
.

[vaske]

@BernabeFelix so it works for you? without any issue?

[BernabeFelix]

Yes, without any problem

On Mon, Apr 30, 2018 at 10:24 AM, Milan Vasic [e-mail]
wrote:

@BernabeFelix https://github.com/BernabeFelix so it works for you?
without any issue?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/25414#issuecomment-385432947,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHbfmybxzwK4S5t8b7PohRnlZxFkr34pks5ttyy3gaJpZM4TsbLq
.

[mal-sokol]

I have the same exact situation!
I import it as

import * as CopyToClipboard from "react-copy-to-clipboard";

and I got Typescript error

JSX element type 'CopyToClipboard' does not have any construct or call signatures.

[TejasQ]

I'd +1 this and add that the type definitions do not account for the fact that this library exports a _named_ version of itself alongside a default export. As in, both

a) import { CopyToClipboard } from "react-copy-to-clipboard" _and_,
b) import CopyToClipboard from "react-copy-to-clipboard"

should be valid.

In essence, this should not error:

More info here:
https://github.com/nkbt/react-copy-to-clipboard/pull/97

[MFry]

So, unless there is more to this story it still doesn't work. You can import it fine, but you cannot use it as a jsx component.
If this is the case, it might be better to remove the typing all together.

You can import it either as

import { CopyToClipboard } from "react-copy-to-clipboard" 
/** or */
import CopyToClipboard from "react-copy-to-clipboard"

and you will still run into the problem
'CopyToClipboard' cannot be used as a JSX component. Its instance type 'CopyToClipboard' is not a valid JSX element.ts(2786)

[vaske]

@MFry did you add types to project?

[vaske]

I ended up using other library but for this one I had define my own type, something like

declare module "react-copy-to-clipboard" {
    import React from "react";

    interface Options {
        debug: boolean;
        message: string;
    }

    interface Props {
        text: string;
        onCopy?(a: string, b: boolean): void;
        options?: Options;
    }

    class CopyToClipboard extends React.Component<Props, {}> {}
    export default CopyToClipboard;
}