Wrapper component in SPAN

[BrunoQuaresma]

Is possible i wrapper my component in span instead div?

[justin808]

@BrunoQuaresma Why would you do that? Check the react docs if that is possible. I don't think it is. I'd recommend just configuring the styling of the div to act like a span. You can do that.

[BrunoQuaresma]

In react-rails gem has the option
html_options: { tag: 'some-tag' }
but this option, using react_on_rails gem, renders something like:
<div tag="span" id="ButtonApp-react-component-0">
when i expected
<span id="ButtonApp-react-component-0">
So, the solution that i found was change the style inline:

<%= react_component("ButtonApp", props: {
            id:"referral-action-button",
            label: publisher_decorator.action_button_description,
            btnType:"primary",
            type:"button",
            size: "sm",
            isDisabled: false,
            style: "btn-raised",
            secondaryStyle:"js-next-phase",
          }, html_options: { style: "display:inline-block" }) %>

[justin808]

Hi @BrunoQuaresma, I updated the README.md.

[BrunoQuaresma]

Thanks @justin808 !

[risinglf]

Hi all,
thanks guys for this gem!

@BrunoQuaresma @justin808 I think it would be great to have the ability to choose which element use as wrapper, as react-rails does.

I used the html_options: { style: "display: inline-block"} but it cannot always work.

Eg: I want to have a react component as an item in a bootstrap navbar-nav, the css rule is:
.navbar-nav > li

With react-rails I always used the tag: 'li' option, with react_on_rails this is not possible and having a div that wraps the component breaks the markup.

What do you think?

[justin808]

@risinglf Please open a new issue if you feel strongly about this. Please include info about why this is worth the extra complexity.

[argasek]

@justin808 Hi, I hit the same issue as @risinglf and I got quite a strong case why such feature is necessary. I render my component enclosed in <p>...</p> tag. As react_on_rails renders in <div>, it leads to semantically incorrect HTML nesting - <div> is not allowed in <p> which, in turn, makes the React component rendered as <div> outside the <p> tag:

I'm forced to change <p> to <div> in order to have a correct nesting:
. Such change makes the HTML code less accessible for screen readers and bots. There are really good reasons why HTML5 have various tags (p, div, span, strong) to denote different functions of web page elements, not just the way they are rendered. Broken markup also makes SEO difficult.

[justin808]

@argasek I can review a PR to add this. Should be easy to make the change to allow an option for that. See https://github.com/shakacode/react_on_rails/blob/master/CONTRIBUTING.md for details.

If you don't have time for a PR, I can do this for you in the context of our services work.

[tahsin352]

@justin808 Please review my PR: #1208 regarding this. Thanks