RootRef API

The API documentation of the RootRef React component. Learn more about the props and the CSS customization points.

Import

import RootRef from '@material-ui/core/RootRef';
// or
import { RootRef } from '@material-ui/core';

You can learn more about the difference by reading this guide.

⚠️⚠️⚠️ If you want the DOM element of a Material-UI component check out FAQ: How can I access the DOM element? first.

This component uses findDOMNode which is deprecated in React.StrictMode.

Helper component to allow attaching a ref to a wrapped element to access the underlying DOM element.

It's highly inspired by https://github.com/facebook/react/issues/11401#issuecomment-340543801. For example:

import React from 'react';
import RootRef from '@material-ui/core/RootRef';

function MyComponent() {
  const domRef = React.useRef();

  React.useEffect(() => {
    console.log(domRef.current); // DOM node
  }, []);

  return (
    <RootRef rootRef={domRef}>
      <SomeChildComponent />
    </RootRef>
  );
}

Props

Name	Type	Default	Description
children*	element		The wrapped element.
rootRef*	refType.isRequired		A ref that points to the first DOM node of the wrapped element.

The component cannot hold a ref.