Need to implement a fragment slide API. Basically parts of slide that fade-in based on user interaction (normally the right arrow).

My initial API thought was this

[
  <div>
    <div>Slide 1 Title</div>
    <div>
      <Fragment index="0"><span>Hello</span></Framework>
      <Fragment index="1"><span>World</span></Framework>
    </div>
  </div>,
  <div>Slide 2 Title</div>
]

In the above example, Hello would fade in on pressing right arrow and then World after the next right arrow key. The issue with this API is that a Fragment component may be very nested in the slide. The top component needs to know how many Fragments exist in the slide (to know when to fade-in vs go to next slide) and needs to tell the Fragment to fade-in and out.

Another API option is this

[
  (fragmentInfo) =>
  <div>
    <div>Slide 1 Title</div>
    <div>
      <Fragment index="0" {...fragmentInfo}><span>Hello</span></Framework>
      <Fragment index="1  {...fragmentInfo}"><span>World</span></Framework>
    </div>
  </div>,
  <div>Slide 2 Title</div>
]

This is more work, but fixes the problem of showing and hiding the Fragment correctly. It does not solve knowing how many Fragments are in the slide.

I don't have any ideas of how to solve this without adding a ton of boilerplate.

[
  {
    fragments: 2,
    slide:  (fragmentInfo) => (
      <div>
        <div>Slide 1 Title</div>
        <div>
          <Fragment index="0" {...fragmentInfo}><span>Hello</span></Framework>
          <Fragment index="1  {...fragmentInfo}"><span>World</span></Framework>
        </div>
     </div>)
  },
  <div>Slide 2 Title</div>
]

This solves both, but I don't like it at all. Any API ideas are welcome.