hypernova-ruby
hypernova-ruby copied to clipboard
airbnb
allow render_react_component(name, props, class: "...")
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 :(
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.
@gfx what CSS are you trying to apply that can't be applied to the root element of your react tree?
Here you are:
*[data-hypernova-key] {
height: 100%;
}
The height of a block element must be specified to the very element.
To clarify, does this mean you're rendering the entire HTML content with react, and you want it to take up the whole screen?
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.
