Is this a good time to use React refs? - reactjs

Question

I'm looking to recreate this elastic nav in a React component (see Codepen). Right now it's written in jQuery--and I'm having trouble getting the position and width in React. Would using React refs be a good way to access that information?
Any thoughts or insight would be greatly appreciated. I've been trying to figure out how to recreate this all week.
The click handler was pretty simple in React. I just created a function and then used onClick. And setting the active class wasn't too hard either. I ended up using a prop.
But these two sections of the code are where I'm stuck--and unsure how to recreate in React:
var activeItem = tabs.find('.active');
var activeWidth = activeItem.innerWidth();
$(".selector").css({
"left": activeItem.position.left + "px",
"width": activeWidth + "px"
});
var activeWidth = $(this).innerWidth();
var itemPos = $(this).position();
$(".selector").css({
"left":itemPos.left + "px",
"width": activeWidth + "px"
});
Here's the full JavaScript/jQuery:
var tabs = $('.tabs');
var selector = $('.tabs').find('a').length;
var activeItem = tabs.find('.active');
var activeWidth = activeItem.innerWidth();
$(".selector").css({
"left": activeItem.position.left + "px",
"width": activeWidth + "px"
});
$(".tabs").on("click","a",function(e){
e.preventDefault();
$('.tabs a').removeClass("active");
$(this).addClass('active');
var activeWidth = $(this).innerWidth();
var itemPos = $(this).position();
$(".selector").css({
"left":itemPos.left + "px",
"width": activeWidth + "px"
});
});
And here's the full HTML:
<div class="wrapper">
<nav class="tabs">
<div class="selector"></div>
</i>Popular
Upcoming
</i>My Movies
</i>Search
</nav>
</div>
And here's the link to the project with CSS (if you want to see it in action).
I'd love for this to be compartmentalized in a single component if possible. But if it needs to have some sub-components that's okay as well.
Thank you!

Answer 1

You can absolutely make this work in react, and you are on the right track.
You can use this syntax to create references to an element in React:
<input ref={input => this.myInput = input} />
Which can then be accessed by a handler tied to your tab links. For example:
handleTabClick = (e, index) => {
e.preventDefault()
position = {left: this.myInput.offsetLeft, top: this.myInput.offsetTop} // Make sure this is the correct JS!
width = this.myInput.offsetWidth // Make sure this is the correct JS!
}
render () {
return (
...
<a href="#" class="tab" onClick={e => handleClick(e, 1)}>Tab 1</a>
...
)
}
I'm not 100% sure about the element properties being accurate (width, position), but you can do a quick google/search on stackoverflow to find the correct ways to do it in vanilla JS instead of jQuery. You can also use this site for native JS methods which accomplish the same as jQuery: http://youmightnotneedjquery.com/