Declaring a const that refers to the current image in the Modal window

[iamevandrake]

Hi,
I would like to declare a constant that refers to the current image in the Modal window. I would like to do this in a separate domain folder, inside of Generation/Image. What is the syntax for declaring the variable? I can't seem to figure it out.
Thanks,
Evan

[KAJdev]

We use zustand for all global state management, so while this value I don't believe is technically exposed since no part of the UI depends on it except for the modal component itself, all you would need to do is define a hook in Generation.Images.Modal that returns the value if you needed it for some reason.

[iamevandrake]

To define the hook, would I do something like this in the Generation/Image/Images/State.tsx file? Or should I be doing this in the Images/Model/index.tsx? Is this the right way to refer to the image?

// Define the shape of the store
type ImageModalStore = {
image: string | null,
setImage: (img: string) => void,
clearImage: () => void,
};

// Create the store
const useImageModalStore = GlobalState.create((set) => ({
image: null,
setImage: (img) => set({ image: img }),
clearImage: () => set({ image: null }),
}));

export default useImageModalStore;

[KAJdev]

You shouldn't need to touch Images.State, just add a new hook in the Modal namespace that returns the value of State.image. e.g.

export const useImage = () =>
  State.use(({ image }) => image, GlobalState.shallow);

[iamevandrake]

@KAJdev where do I place that export const? I'm having a hard time understanding the file structure. My Image/Modal/Content.tsx is calling a function that I want to reference the image.