allow render_react_component(name, props, class: "...")

gfx commented 7 years ago

We need to specify HTML class attributes to the wrapper div elements.

Can you review it please?

BTW I can't pass the test (#8) so the CI will fail :(

gfx commented 7 years ago

Can you elaborate on why you need this? Specifically, why does any code besides hypernova's clientside JS need to reference this div?

This is because we need to apply CSS.

Out code includes CSS something like this:

foo {
  *[data-hypernova-key] {
     // blah blah blah
  }
}

This works but I think it is ugly and I don't want to depend on hypernova-specific things in CSS. If this PR is merged, I just add a CSS selector to the hypernova's div.

ljharb commented 7 years ago

@gfx what CSS are you trying to apply that can't be applied to the root element of your react tree?

gfx commented 7 years ago

Here you are:

  *[data-hypernova-key] {
    height: 100%;
  }

The height of a block element must be specified to the very element.

ljharb commented 7 years ago

To clarify, does this mean you're rendering the entire HTML content with react, and you want it to take up the whole screen?

juanca commented 2 years ago

I have a couple of use-cases:

Reduce unnecessary <div>s by styling the generated div instead of another wrapping <div>.
Apply a grid area name to the container to make the generated div fit an area of the page (sub-grid feature is not yet supported)
Apply a sticky position on either the generated div to make the react component sticky against the document.

Put it all together:

<body style="grid-template-areas: 'nav main'">
  <div style="grid-area: nav">
    <%= render_react_component('nav', { ... }, { style: "position: sticky; top: 0" }
  </div>
  <main>...</main>
  </div>
</body>

I could move the grid-area: nav to the generate div and make the react root component sticky. But either way, AFAIK, there is a necessity to style the generated div.

Unfortunately, I cannot render the whole application in React because our codebase is a mixture of accumulated tech stacks.

airbnb / hypernova-ruby

allow render_react_component(name, props, class: "...") #9