Any info on WC (Wrapper Component)?

Photoshop UXP Plugin API
,
1

Hi, I’m new to React and UXP so you will see a few questions from me in this forum board :slight_smile:

Searched a lot, but can’t find any proper examples or docs on WC usage apart from sample react starter plugin for color sliders. As I said, I’m new to react and UXP and such info might really help me figure out how to use it and when not to. One example isn’t enough :frowning:

Thank you

2

Not quite sure what you mean by Wrapper Component :thinking:

3

React starter plugin has this WC.jsx and I’m pretty sure I saw somewhere Adobe emphasized that it’s included with this starter plugin, but now I can’t find where :slight_smile:

4

Hi @Karmalakas – it’s mentioned in our Spectrum Docs here: https://www.adobe.io/photoshop/uxp/uxp/reference-spectrum/Overview/Using%20with%20React/#event-handling

The intent with WC is just to use it to wrap one or more Spectrum UXP web components so that you can use React to attach event listeners. React doesn’t attach a click handler with onClick to web components like you would normally expect.

Instead, you have to work around that limitation. You can do that manually with ref and adding & removing event listeners when the component mounts, but that’s a lot of boilerplate, and it’s easy to mess up. So I wrote WC to do it instead. (And if you look at the source, you’ll see that’s all it is doing.)

WC isn’t part of UXP, and there’s many different ways you can wrap such a component, so it’s up to you whether you want to use the implementation in our sample projects. You’re free to do so, of course.

There’s no real docs for it, though, because it’s just a mounting point for your event handlers that you’d otherwise attach to a Spectrum UXP component.

For example, this is what you’d like to be able to do with React & Spectrum UXP:

<sp-button onClick={clickHandler}>Click Me</sp-button>

… but that won’t work. With WC, you can do this (and this will work for any on% event handler):

<WC onClick={clickHandler}>
    <sp-button>Click Me</sp-button>
</WC>

… which replaces:

class MyComponent extends React.Component {
    constructor(props) {
        this.super(props);
        this._myButton = React.createRef();
        this.clickHandler = this.clickHandler.bind(this);
    }
    componentDidMount() {
        this._myButton.current.addEventListener("click", this.clickHandler);
    }
    componentWillUnmount {
        this._myButton.current.removeEventListener("click", this.clickHandler);
    }
    clickHandler() { /*...*/
    }
    render() {
        return (<sp-button ref={this._myButton}>Click Me</sp-button>);
    }
}

In short – use WC or a variation whenever you want to attach an event listener directly to an SP-% widget. If you’re attaching something to a DIV or SPAN or the like, then you don’t need it.