Use of component in Section leads to readability issues in large code about react-headings

[alexnault]

Hi @drewpc!

This is how react-headings used to be, in version 2.x. And unfortunately, this solution came with its downsides...

1. It was very easy to miss a heading, and therefore break the hierarchy:

<Section>
  <Section>
    <H>This is a hx+1</H> {/* problem: we skipped hx */}
  </Section>
</Section>

2. Headings could also easily be inserted after their sub-headings, again breaking the hierarchy:

<Section>
  <Section>
    <H>My hx+1</H>
  </Section>
  <H>My hx</H> {/* problem: hx comes after hx+1 */}
</Section>

Those are the ones that come to mind right now.

While seemingly trivial, the lack of structure and guarantees created confusion for some, myself included.

Although react-headings 3 is not perfect, it helped mitigate those issues. Do you know how we could make the API more readable while avoiding the problems mentioned?

[drewpc]

Oh great! Those are issues I hadn't considered previously. In my tests, the second issue worked fine as is--a header coming after a section rendered with the proper level. The first issue required a bit of rethinking, but I was able to make it work with a state variable that tracks whether or not an H tag was used in a section.

I'll run it through some tests and submit a PR later today.