S
SolidJS•2y ago
ringsig

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
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
ringsig
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
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
ringsig
ringsigOP•2y ago
Alright perfect, exactly what I was looking for. Thanks!

Did you find this page helpful?