root-ref
v4.9.10arrow_drop_down⚠️⚠️⚠️ 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>
);
}
API:
⚠️⚠️⚠️ 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>
);
}
Name | Type | Description |
---|---|---|
children (required) | element | The wrapped element. |
rootRef | custom | A ref that points to the first DOM node of the wrapped element. |