Use of <div> fails validateDOMNesting check in certain elements

[exogen]

(xposting to react-size-observer as it's an issue there as well ☹️)

Apologies if someone has brought this up before. I've tried both react-resize-detector and react-resize-observer, and I'm using them in a way where I need it to live inside elements like <p> and <span> sometimes.

But React complains about this since it's against the HTML spec:

index.js:2178 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

It seems like the same functionality could be done with span as long as it's set to display: block. AFAIK spans are valid everywhere. Would it be worthwhile to switch?

[maslianok]

Hi @exogen ,

Thanks for this suggestion.
To be honest I'm afraid that this change will break something :)

I suggest to test it a bit before push a new release to npm. Can you maybe fork the repo, make this change and test it in your app?
You need to change 1 line of code in src/index.js

wdyt?

[ai212983]

I'd suggested to make this configurable, because spans are NOT valid everywhere (try to put them into 'table', for example)

[maslianok]

hmmm...
We can use React.createElement feature to create a configurable react element. Instead of using a hardcoded div element.

And we can pass the node type as a prop, right?

It will look like this

<ReactResizeDetector nodeType="tr" ... />
// or
<ReactResizeDetector nodeType="span" ... />

I think it may work. Thanks for the idea, @ai212983 !
Can someone make a PR on this?

[maslianok]

Thanks everyone for discussion and ideas.

Deployed in v3.4.0.

Use nodeType prop to change the node's type. div by default.