Any info on WC (Wrapper Component)?

Photoshop UXP Plugin API
,
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.