useObjectRef

Offers an object ref for a given callback ref or an object ref. Especially helfpul when passing forwarded refs (created using React.forwardRef) to React Aria Hooks.

API#

Introduction#

The useObjectRef hook creates an object ref for a given ref. The given ref may be an object ref or a callback ref. The created ref is particularly helpful when defining a custom component using React.forwardRef, and wanting to pass the forwarded ref to a @react-aria Hook that accepts a ref (e.g. useButton).

Example using an object ref#

const TextField = React.forwardRef((props, forwardedRef) => {
  const {label} = props;
  const ref = useObjectRef(forwardedRef);

  const {labelProps, inputProps} = useTextField(props, ref);

  return (
    <div style={{display: 'flex', flexDirection: 'column', width: 200}}>
      <label {...labelProps}>{label}</label>
      <input {...inputProps} ref={ref} />
    </div>
  );
});

function Example() {
  const textFieldRef = React.useRef();

  return (
    <div>
      <p>
        <TextField
          label="Email"
          placeholder="abc@example.com"
          ref={textFieldRef}
        />
      </p>
      <p>
        <button onClick={() => textFieldRef.current.focus()}>
          Click me to focus text field
        </button>
      </p>
    </div>
  );
}

<Example />

const TextField = React.forwardRef(
  (props, forwardedRef) => {
    const {label} = props;
    const ref = useObjectRef(forwardedRef);

    const {labelProps, inputProps} = useTextField(
      props,
      ref
    );

    return (
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          width: 200
        }}>
        <label {...labelProps}>{label}</label>
        <input {...inputProps} ref={ref} />
      </div>
    );
  }
);

function Example() {
  const textFieldRef = React.useRef();

  return (
    <div>
      <p>
        <TextField
          label="Email"
          placeholder="abc@example.com"
          ref={textFieldRef}
        />
      </p>
      <p>
        <button
          onClick={() => textFieldRef.current.focus()}>
          Click me to focus text field
        </button>
      </p>
    </div>
  );
}

<Example />

const TextField = React.forwardRef(
  (
    props,
    forwardedRef
  ) => {
    const {
      label
    } = props;
    const ref = useObjectRef(
      forwardedRef
    );

    const {
      labelProps,
      inputProps
    } = useTextField(
      props,
      ref
    );

    return (
      <div
        style={{
          display:
            'flex',
          flexDirection:
            'column',
          width: 200
        }}>
        <label
          {...labelProps}>
          {label}
        </label>
        <input
          {...inputProps}
          ref={ref}
        />
      </div>
    );
  }
);

function Example() {
  const textFieldRef = React.useRef();

  return (
    <div>
      <p>
        <TextField
          label="Email"
          placeholder="abc@example.com"
          ref={
            textFieldRef
          }
        />
      </p>
      <p>
        <button
          onClick={() =>
            textFieldRef.current.focus()
          }>
          Click me to
          focus text
          field
        </button>
      </p>
    </div>
  );
}

<Example />

Example using a callback ref#

const TextField = React.forwardRef((props, forwardedRef) => {
  // Same as in the previous example...
});

function Example() {
  const textFieldRef = React.useRef();

  return (
    <div>
      <p>
        <TextField
          label="Email"
          placeholder="abc@example.com"
          ref={(el) => (textFieldRef.current = el)}
        />
      </p>
      <p>
        <button onClick={() => textFieldRef.current.focus()}>
          Click me to focus text field
        </button>
      </p>
    </div>
  );
}

<Example />

const TextField = React.forwardRef(
  (props, forwardedRef) => {
    // Same as in the previous example...
  }
);

function Example() {
  const textFieldRef = React.useRef();

  return (
    <div>
      <p>
        <TextField
          label="Email"
          placeholder="abc@example.com"
          ref={(el) => (textFieldRef.current = el)}
        />
      </p>
      <p>
        <button
          onClick={() => textFieldRef.current.focus()}>
          Click me to focus text field
        </button>
      </p>
    </div>
  );
}

<Example />

const TextField = React.forwardRef(
  (
    props,
    forwardedRef
  ) => {
    // Same as in the previous example...
  }
);

function Example() {
  const textFieldRef = React.useRef();

  return (
    <div>
      <p>
        <TextField
          label="Email"
          placeholder="abc@example.com"
          ref={(el) =>
            (textFieldRef.current = el)
          }
        />
      </p>
      <p>
        <button
          onClick={() =>
            textFieldRef.current.focus()
          }>
          Click me to
          focus text
          field
        </button>
      </p>
    </div>
  );
}

<Example />