Render items from flyout menu inside SPA

Photoshop UXP Plugin API
1

I am trying to make a SPA plugin and i was able to render pages on click of each button but i got stuck when i tried to render items from flyout menu inside my app. For example I want to render Settings page on click, Is it possible and how?

I’m fairly new to this, so please be patient :smiley:

Screenshot 2023-08-04 at 22.55.50
Screenshot 2023-08-04 at 22.55.50954×576 28.1 KB

import "./style.css"
import "./photoshop/scripts"
import Home from './contexts/Home';
import Layers from './contexts/Layers';
import Colors from './contexts/Colors';
import { useState } from "react";
import {HomeBtn,LayersBtn,ColorsBtn} from "./components/Tools"


const App = () => {
  const [selected, setSelected] = useState()
  return (
    <div className="plugin">
        <div className="tools">
        <div onClick={()=>{setSelected('home')}}><HomeBtn></HomeBtn></div>
        <div onClick={()=>{setSelected('layers')}}><LayersBtn></LayersBtn></div>
        <div onClick={()=>{setSelected('colors')}}><ColorsBtn></ColorsBtn></div>
    </div>
        
    <div className="container">
        {(selected == 'home') ? <Home/> : null}
        {(selected == 'layers') ? <Layers/> : null}
        {(selected == 'colors') ? <Colors/> : null}
    </div>
</div>

  );
};

export default App;
2

Check this video by @DavideBarranca he explains how it works: https://www.youtube.com/watch?v=v-x1ZrOtlzQ

1 Like
3

Yes, this is very useful, thanks to @DavideBarranca, based on his channel I created this flyout menu as well as the whole application, but I’m not sure how to display those items in a “container” on my page, maybe I need to use props to change state, but I don’t know how? :see_no_evil:

4

To be honest, I’ve always only use the flyout to pop up modal dialogs at best. The fact it’s defined outside of the React root component of your application makes it difficult to implement anything related to the flyout handler as somewhat stateful.
Given that I didn’t need the flyout except for About dialogs and Prefs I gave up early, but maybe someone else has researched the problem more.
This if I understand @milevicm request, which is to use the flyout as a navigation tool for the panel.

1 Like
5

Yeah, that’s what I was thinking, that where the pages called by button clicks are rendered, I also render the settings and about pages. I just wanted to make everything as single page app, but I’m getting closer to the idea of giving up and making a classic pop up modal dialog.
I’ll google some more…
I am really thankful for your dedication, if you have any other useful advice or hint please share.

6

If you manage to put the click handler as a child, say, of a context provider, you’ll get it—but I never did. In case, share the wealth :blush: