search

camwest / react-slot-fill

Slot & Fill component for merging React subtrees together. Portal on steroids.
https://camwest.github.io/react-slot-fill/
Other
656 stars 27 forks source link

Fills ordered by least recently mounted #35

Open maxkostow opened 6 years ago

maxkostow commented 6 years ago

Issue:

Fills are rendered in reverse order that they are mounted

Expected:

Fills are rendered in their order in the react tree

Example:

https://conscious-violet.glitch.me/ See that the order that you toggle survey/news affects their button order in the toolbar

I'm happy to open a PR if you can think of a way to calculate the order. My only thought was to base it on a timestamp/global counter since I don't think components have access to their siblings but that seems like a poor solution.

gorangajic commented 6 years ago

@maxkostow have you figured this one out? I want to mount only the first component in a tree

<Slot name="modal">
    {slots => slots[0] || null}
</Slot>
maxkostow commented 6 years ago

I have not; my workaround has been to render all fills in their place and include a prop on the fill child (or wrapper) that prevents it from rendering anything.

In your example, that might looks something like

<Slot>
  {fills => fills.find(fill => !fill.props.hidden)}
</Slot>
camwest commented 6 years ago

@maxkostow I'd be happy to accept PRs on this, but I don't have the bandwidth to figure it out myself at the moment.