# How to use spectrum web components in React starter template in UXP Photoshop plugin?

**URL:** <https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336>\
**Category:** UXP Plugin API\
**Tags:** spectrum\
**Created:** [December 14, 2020, 3:15pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336 "2020-12-14T15:15:06Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![aquentdevl](https://avatars.discourse-cdn.com/v4/letter/a/a5b964/32.png) [@aquentdevl](https://forums.creativeclouddeveloper.com/u/aquentdevl)\
**Post date:** [December 14, 2020, 3:15pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/1 "2020-12-14T15:15:06Z")

</div>

Hey, guys! Hope someone can give me some help with this issue…

I am developing Photoshop UXP plugin using ReactJS. I want to use some of the spectrum web components like search, tags, switch, etc. in React starter template plugin. How can I achieve this? Any sample with such spectrum web components will be appreciated.

Thanks in advance…

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [December 14, 2020, 3:36pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/2 "2020-12-14T15:36:24Z")

</div>

I think it was already answered to you 😕

---

<div class="post-metadata">

**Author:** ![Trasatti](https://avatars.discourse-cdn.com/v4/letter/t/ba9def/32.png) [@Trasatti](https://forums.creativeclouddeveloper.com/u/Trasatti)\
**Post date:** [May 9, 2022, 11:26am UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/3 "2022-05-09T11:26:51Z")

</div>

> [@Karmalakas](#):
>
> already

it seems that the link “it was already answered to you” is not working : any help ? Thanks  
:

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [May 9, 2022, 11:41am UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/4 "2022-05-09T11:41:47Z")

</div>

Short answer - neither [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/) nor [Spectrum Web Components](https://opensource.adobe.com/spectrum-web-components/) is supported in UXP. Only [Spectrum UXP](https://developer.adobe.com/photoshop/uxp/uxp/reference-spectrum/) (which is an implementation of [Spectrum Web Components](https://opensource.adobe.com/spectrum-web-components/)) is supported.

Here’s @kerrishotts [answer](http://forums.creativeclouddeveloper.com/t/how-to-use-react-spectrum-components-in-react-starter-template-in-uxp-photoshop-plugin/2330/2) 1,5 years ago (maybe there’s some update?)

---

<div class="post-metadata">

**Author:** ![Trasatti](https://avatars.discourse-cdn.com/v4/letter/t/ba9def/32.png) [@Trasatti](https://forums.creativeclouddeveloper.com/u/Trasatti)\
**Post date:** [May 9, 2022, 12:48pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/5 "2022-05-09T12:48:54Z")

</div>

Thanks, so…no easy way to have an accordion in UXP plugin I suppose …

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [May 9, 2022, 1:00pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/6 "2022-05-09T13:00:40Z")

</div>

Depends on what’s easy for you 🙂 I would say accordion is quite easy to implement manually 🙂 You just gave me an idea for one of my plugins 😃

---

<div class="post-metadata">

**Author:** ![Trasatti](https://avatars.discourse-cdn.com/v4/letter/t/ba9def/32.png) [@Trasatti](https://forums.creativeclouddeveloper.com/u/Trasatti)\
**Post date:** [May 9, 2022, 1:51pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/7 "2022-05-09T13:51:48Z")

</div>

Easy is almost nothing to me because I’m still learning the basics …

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [May 9, 2022, 2:01pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/8 "2022-05-09T14:01:43Z")

</div>

There are several ways to build an accordion – I think the one that requires the least amount of JS code is to use a checkbox that’s positioned off screen, which then controls the visibility of the content in the panel. You do all of that purely w/ CSS.

The Kitchen Sink in the uxp-6.0 branch of the plugin samples repo has an accordion example that uses this pattern.

- [CSS](https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/blob/shotts/uxp-6.0/ui-kitchen-sink/accordion.css) (You’ll probably need to adjust lines 1-7 & 45-50 to fit w/ your design & layout)
- [HTML](https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/blob/shotts/uxp-6.0/ui-kitchen-sink/index.html#L1249-L1261)

No JS required.

---

<div class="post-metadata">

**Author:** ![Trasatti](https://avatars.discourse-cdn.com/v4/letter/t/ba9def/32.png) [@Trasatti](https://forums.creativeclouddeveloper.com/u/Trasatti)\
**Post date:** [May 9, 2022, 6:59pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/9 "2022-05-09T18:59:27Z")

</div>

Thanks a lot @kerrishotts I’ll have a look to it !

---

<div class="post-metadata">

**Author:** ![Trasatti](https://avatars.discourse-cdn.com/v4/letter/t/ba9def/32.png) [@Trasatti](https://forums.creativeclouddeveloper.com/u/Trasatti)\
**Post date:** [May 15, 2022, 9:28pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/10 "2022-05-15T21:28:25Z")

</div>

Thanks @kerrishotts it works perfectly and it was easy to add it to my code. The only problem is that i need the accordion-content NOT to be shown/hidden when the accordion-content itself is clicked. I need the accordion-content to be shown/hidden ONLY when the accordion itself is clicked . Referring to your Kitchen-Sink code (see example image below) i DON’T need the 3 buttons to be shown/hidden when the same area of the buttons is clicked. I need them to be shown/hidden only when the ‘detail’ row with the text ‘code’ or the arrows on the same line are clicked. Any suggestion ?

 ![Accordion](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/4/49ce3ada5a37fed1f540f587ff923294e356b666.jpeg)

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [May 16, 2022, 4:10pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/11 "2022-05-16T16:10:18Z")

</div>

First, double check your HTML & CSS. The up/down chevrons should not be visible simultaneously. ([These lines](https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/blob/shotts/uxp-6.0/ui-kitchen-sink/accordion.css#L25-L36) control this, but are dependent upon your HTML structure.)

![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/b/ba22fe6ed9fea7443bb50090c95492aadfff2bee.png)

Second, you’re going to have to get into a little bit of JS if you don’t want the content area to collapse the accordion. This should get you work for most cases:

```javascript
document.querySelector(".accordion-content").addEventListener("click", evt => {
  evt.preventDefault();
});

```

---

<div class="post-metadata">

**Author:** ![Trasatti](https://avatars.discourse-cdn.com/v4/letter/t/ba9def/32.png) [@Trasatti](https://forums.creativeclouddeveloper.com/u/Trasatti)\
**Post date:** [May 17, 2022, 4:43pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/12 "2022-05-17T16:43:34Z")

</div>

Thanks @kerrishotts. this solution works (in my code) only after the second time the .accordion-content is clicked, but the first time then the accordion.content is clicked the accordion content hidden

This make sense because the first time the .accordion-content is clicked the default has not yet been prevented through the querySelector, but it is not what I need. There is no way to prevent the default since the begining ?

Thanks  
Daniele

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [May 17, 2022, 7:16pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/13 "2022-05-17T19:16:10Z")

</div>

The above `evt.preventDefault()` happens on the same event that’s triggering the closure – that is, it’s not setting a _future_ preference, but applying only to the currently processing event.

Where are you executing the above code? It needs to be run _after_ the DOM has the above accordion (otherwise `querySelector()` will return `undefined`, and an error throws), and before the user is going to start interacting with the panel. (It also only needs to happen _once_ for that particular instance of accordion)

So – sequence:

1. `div.accordion-content` is created in the DOM (in `index.html` is fine)
2. above JS is executed (immediately _after_ #1 above – so you probably want to wait for `DOMContentLoaded` or similar event – or just put the JS at the _bottom_ of `index.html`)
3. #1 and #2 have to happen before the user is going to start interacting with the element.

---

<div class="post-metadata">

**Author:** ![Trasatti](https://avatars.discourse-cdn.com/v4/letter/t/ba9def/32.png) [@Trasatti](https://forums.creativeclouddeveloper.com/u/Trasatti)\
**Post date:** [May 18, 2022, 6:59am UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/14 "2022-05-18T06:59:11Z")

</div>

Thanks again @kerrishotts . I don’t want to bore you too much with specific issues of my code, however I have tried to implement the solution you suggested and it works but only on the first accordion of the series. In fact my panel contains a few containers with an accordion inside each container (see image) . The querySelector affects only the first accordion of the first container. I work in the React environment and I have inserted the code with the querySelector inside a UseEffect so that it is executed the first time the interface (containing all the containers) is rendered. I also tried to change the UseEffect so that it is executed everytime the interface is rendered but the result doesn’t change : the first accordion has the default properly prevented from the beginning, before the user interacts, but the second accordion doesn’t

 ![Deleme container](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/6/6f421cdd5435840d28da94af3d14c401c5341b67.jpeg)

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [May 18, 2022, 7:40am UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/15 "2022-05-18T07:40:39Z")

</div>

[querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) only selects the first element that matches the selector. You can use [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) which will give you a `NodeList`. There might be a better way of doing this though, here are some thoughts:

- If you want to access DOM elements in React, RefObjects (or RefCallbacks) are usually the better way and you don’t have to worry that much about whether the element has been created yet or not. Since you have a list of elements, here are examples of how to assign an array of Refs:[javascript - How can I use multiple refs for an array of elements with hooks? - Stack Overflow](https://stackoverflow.com/questions/54633690/how-can-i-use-multiple-refs-for-an-array-of-elements-with-hooks)
- Since you’re using React, why not simply do `<div onClick={e => e.preventDefault()}/>` ?
- In some cases, event propagation / bubbling between parent and child elements can also be prevented using just CSS via `pointer-events: none`. A consequence of that would be that the text inside the accordion can’t be highlighted anymore (or buttons not clicked etc.)

---

<div class="post-metadata">

**Author:** ![Trasatti](https://avatars.discourse-cdn.com/v4/letter/t/ba9def/32.png) [@Trasatti](https://forums.creativeclouddeveloper.com/u/Trasatti)\
**Post date:** [May 18, 2022, 5:15pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/16 "2022-05-18T17:15:45Z")

</div>

> [@simonhenke](#):
>
> `<div onClick={e => e.preventDefault()}/>` ?

thanks @simonhenke & @kerrishotts for helping me find the easiest solution 💥 💥 💥, perhaps easy, but alone I would not have succeeded !

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [May 29, 2022, 5:16pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/17 "2022-05-29T17:16:22Z")

</div>

Trying to implement accordion myself and once again headbanging into the limitations of UXP that even IE6 didn’t have IIRC.

Why can’t label and checkbox play properly together with `for`?

```auto
<input type="checkbox" id="check" />
<label htmlFor="check">Label</label>

```

Normally clicking on `label` should check the `input:checkbox`, but nothing happens 🤯

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [May 29, 2022, 6:11pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/18 "2022-05-29T18:11:24Z")

</div>

Wrapping input elements inside `label` works:

```auto
<label>
  <input type="checkbox" />
  Label
</label>

```

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [May 29, 2022, 6:12pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/19 "2022-05-29T18:12:17Z")

</div>

I know this, but, to properly implement accordion without JS, this is not an option ☹ Or, as you suggested previously, some workarounds with JS need to be done (again)

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [May 29, 2022, 6:14pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336/20 "2022-05-29T18:14:06Z")

</div>

I assume the CSS selector is the issue due to nesting? What’s your HTML structure?

[Next page](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-web-components-in-react-starter-template-in-uxp-photoshop-plugin/2336.md?page=2)