search

ethanselzer / react-cursor-position

A React component that decorates its children with mouse and touch coordinates relative to itself.
https://ethanselzer.github.io/react-cursor-position
MIT License
143 stars 35 forks source link

Can I remove the warning in table tag? #15

Closed Jongkeun closed 6 years ago

Jongkeun commented 6 years ago

First of all, I appreciate your project. This is very useful library.

I have some question. Um... I have known this library is consist of a div tag. I would like to use this library inside a table tag. But If I used it inside a table or tr tag, this log is appeared "Warning: validateDOMNesting(...): \<tr> cannot appear as a child of \<div>"

this is my html. \<div> \<table> \<tbody> \<div> <= react-cursor-position \<tr> <= this is other jsx component \</tr> \<div> \</tbody> \</table> \</div>

This was written on one jsx file.

If I changed react-cursor-position's location, this warning is not appeared. but I can't use react-cursor-position's props.

What should I do? Is there any way to select specific tag by class name or id and use react-cursor-position's props at child tag?

ethanselzer commented 6 years ago

Hi @Jongkeun - Thanks for opening this issue! One possible solution might be to use a CSS table. Here is an example of react-cursor-position using a CSS table. Also, here is some documentation on CSS tables. Please let me know how it work for you.

Jongkeun commented 6 years ago

Thanks for reply about my question. I have known this way. But I didn't want to change table tag. So I changed react-cursor-position's location and made another jsx component. Then it's possible to get position props from another jsx component. I solved by using this way. But your way is the best.

ethanselzer commented 6 years ago

Hi @Jongkeun - I'm glad you have a solution! If you find react-cursor-position useful, please consider starring it on GitHub. Starring helps to grow the project, which benefits everyone. Thanks!