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

widgetApiRef.value is not a function

Open djkgamc opened this issue 2 years ago • 2 comments

Describe the bug

README is incorrect or there is a bug in the code for WidgetRef

See this section in the readme here - https://github.com/uploadcare/react-widget

ref: widgetApiRef Define a reference object to address the Widget API wrapper. Use it to access these methods: value, openDialog, reloadInfo and getInput.

value() is the alias for widget.value() openDialog() is the alias for widget.openDialog() reloadIngo() is the alias for widget.reloadInfo() getInput() returns widget's input element instance.

Now try this code:

import React, { useRef } from "react"; import ReactDom from "react-dom"; import { Widget } from "@uploadcare/react-widget";

import "./styles.css";

const Example = () => { const widgetApi = useRef();

return (

<button onClick={() => { const widget = widgetApi.current widget.value("https://i0.wp.com/www.techjunkie.com/wp-content/uploads/2020/08/How-to-Copy-and-Get-a-Link-to-Any-Online-Image-Embedded-in-a-Website.jpg?resize=660%2C430&ssl=1") const dialog = widget.openDialog();
      console.log(dialog);
      dialog.switchTab("url");
    }}
  >
    Click me
  </button>

  <Widget ref={widgetApi} publicKey="demopublickey" preloader={null} />
</div>

); }; ReactDom.render(<Example />, document.querySelector("#app"));

You'll get the error: widget.value is not a function

Expected behavior

widget.value should be a function...

Code / screenshots

Environment

I ran this code by modifying the example here https://codesandbox.io/s/keu2y

djkgamc avatar Jun 15 '23 17:06 djkgamc

Hety @djkgamc,

an outdated version 1.2.0 is being used In your codesandbox, whereas the current version is 2.4.5.

nd0ut avatar Jul 20 '23 15:07 nd0ut

That is the problem!

In that case, the fix to the README would be to update the package in your linked Sandbox, as the Sandbox link above is the link from your README, labeled "Example" over here. https://github.com/uploadcare/react-widget#ref-widgetapiref

djkgamc avatar Jul 21 '23 16:07 djkgamc