How to enable effects?

[skreutzberger]

Question

I tried to get the effects bar at the bottom of the widget to work but somehow it never shows up?! What am I doing wrong?

Here is my widget:

<Widget
  publicKey={process.env.NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY}
  id="file"
  tabs="file url gdrive gphotos dropbox instagram"
  multipleMax="1"
  previewStep={true}
  clearable={false}
  imagesOnly={true}
  multiple={false}
  effects={[ "crop", "enhance",   "sharp", "blur", "flip","rotate", "mirror" ]}
</Widget>                        

I also tried it with effects="crop,enhance,sharp" but it also did not work.

This is what I see:

Thank you!

[optlsnd]

The type of the effects attribute must be a string. For example,

effects="crop,enhance,sharp"

Also, you need to import uploadcare-widget-tab-effects.

import React from "react";
import ReactDOM from "react-dom";
import { Widget } from "@uploadcare/react-widget";
import Effects from "uploadcare-widget-tab-effects";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Widget
        publicKey="demopublickey"
        effects="crop,blur,sharp,grayscale,enhance,flip,rotate"
        customTabs={{ preview: Effects }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[skreutzberger]

Awesome, it works! Thank you for the fast reply.