Setting offsetLeft on a react ref

Active3 hr before
Viewed126 times

9 Answers


the above example is using a react class component.,I'm trying to do similar with a functional component:,I'm trying to reset a sliding containers offsetLeft property after a state change, similar to this blog which seems to do it like so:

 Pretag team - issue, fix, solve, resolve

For block-level elements, offsetTop, offsetLeft, offsetWidth, and offsetHeight describe the border box of an element relative to the offsetParent.,HTMLElement.offsetParent, HTMLElement.offsetTop, HTMLElement.offsetWidth, HTMLElement.offsetHeight,The HTMLElement.offsetLeft read-only property returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node.

left = element.offsetLeft;
load more v

 Pretag team - issue, fix, solve, resolve

The returned value includes:,The offsetLeft property returns the left position (in pixels) relative to the left side the offsetParent element.,Tip: To return the top position of an element, use the offsetTop property.

 Pretag team - issue, fix, solve, resolve

This will print the element’s width to the console. This is what we expect because we set the width to 200px in style attribute.,You can use Element.getClientRects() and Element.getBoundingClientRect() to get the size and position of an element. In React, you’ll first need to get a reference to that element. Here’s an example of how you might do that.,Store the element’s size and position on your state. Then check for changes via ResizeObserver or polling depending on your needs.

function RectangleComponent() {
  return (
      ref={el => {
        // el can be null - see
        if (!el) return;

        console.log(el.getBoundingClientRect().width); // prints 200px
        display: "inline-block",
        width: "200px",
        height: "100px",
        background: blue
load more v

The component you're importing may not be forwarding the ref to its underlying React component. If all you need to do is measure or find position, you could solve this by wrapping it in a div and attaching your ref to that.,Spectrum will become read-only on August 24, 2021. Learn more about the decision in our official announcement.,A community of developers, designers and others who love React.js. ⚛️

class MyComponent extends React.Component {  constructor(props) {    super(props);    this.myRef = React.createRef();  }  render() {    console.log(this.myRef);    return <div ref={this.myRef} />;  }}
load more v

While React has ways to break the hatch and directly manipulate the DOM there are very few reasons to do this. We shouldn’t directly manipulate the DOM unless we have a really good reason to. When we need to we should use the ref property. Only as a last resort should we manipulate the DOM directly as well as change state during a render.,The dreaded flicker! It was ever so subtle, but it made our team twitch. There was a flash on initial load and when transitioning the tutorial tip it would hangout just one render step before where it was supposed to be.,Let’s hook up our getters and setters so our component knows when to fire them and update its props and state.

 Pretag team - issue, fix, solve, resolve

Refs provide a way to access DOM nodes or React elements created in the render method.,React also supports another way to set refs called “callback refs”, which gives more fine-grain control over when refs are set and unset.,When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref.

class MyComponent extends React.Component {
  constructor(props) {
    this.myRef = React.createRef();  }
  render() {
    return <div ref={this.myRef} />;  }
load more v

Use the useLayoutEffect when ever you need to use useRef.,The first step is to to create the DOM node references for the group div element and the input field element.,The value of current is an object that represents the DOM node you’ve selected to reference.

// Old reference method
const inputRef = document.querySelector('input');

// React reference method
// Use useRef() for React functional components
const inputRef = useRef();

<input ref={inputRef} />
load more v

Other "setting-react" queries related to "Setting offsetLeft on a react ref"