SolidJS•2y ago

Best way to implement a dialog in Solid.js

I'm using Solid.js for a library and need to implement a dialog to capture some user input (say, a selection from a set of multiple options). I want to provide a function that will display the dialog and return a promise that will resolve with the result of the dialog (e.g. the option the user selected). What's the best way to go about this? What I have in mind is to render the dialog and add an event handler for an option being selected that will resolve the promise and destroy the dialog. However, I can't figure out how I should destroy it. Is there a better method I'm missing?

4 Replies

mdynnl•2y ago

<Show when={open()}>
  <div class="dialog">
    <For each={options()}>
    {(option) => <button onClick={[setCurrent, option]}>{option}</button>}
    </For>
  </div>
</Show>

<Show when={open()}>
  <div class="dialog">
    <For each={options()}>
    {(option) => <button onClick={[setCurrent, option]}>{option}</button>}
    </For>
  </div>
</Show>

you can use Portal if you want to mount it to somewhere outside in the dom

ringsigOP•2y ago

Yeah, I am using a portal for my dialog. However, I want to consume the dialog outside Solid.js components. This is my code right now if it helps give an idea of what I'm trying to accomplish

mdynnl•2y ago

render returns dispose is Portal in AuthenticationMethodPicker? ~~you probably don't need a root or manual render if Portal is top level~~ ~~as there's nothing to render and Portal already handles where it mounts~~ best to use render so that it also works when used solid

ringsigOP•2y ago

Alright perfect, exactly what I was looking for. Thanks!

Gaming

Programming

Best way to implement a dialog in Solid.js