Styjun

Why is the Digital 0 not 0V in computer systems?

Can I conceal an antihero's insanity - and should I?

A simple problem about Rule

"Literally" Vs "In the true sense of the word"

Why is the T-1000 humanoid?

The Planck constant for mathematicians

Why did they ever make smaller than full-frame sensors?

What is the purpose of this tool?

Why did it become so much more expensive to start a university?

What is the derivative of an exponential function with another function as its base?

How can I discourage sharing internal API keys within a company?

Cannot find Database Mail feature in SQL Server Express 2012 SP1

What is a realistic time needed to get a properly trained army?

What was redacted in the Yellowhammer report? (Point 15)

Stucturing information on this trade show banner

Percentage buffer around multiline in QGIS?

Why do sellers care about down payments?

Can I toggle Do Not Disturb on/off on my Mac as easily as I can on my iPhone?

How to publish superseding results without creating enemies

Can I fix my boots by gluing the soles back on?

Bash, import output from command as command

In Germany, how can I maximize the impact of my charitable donations?

Were Roman public roads build by private companies?

Why don't Wizards use wrist straps to protect against disarming charms?

Material UI components not returning an HTMLElement reference

Is JavaScript a pass-by-reference or pass-by-value language?event.preventDefault() vs. return falseReturn multiple values in JavaScript?Why does ++[[]][+[]]+[+[]] return the string “10”?How do I return the response from an asynchronous call?Make global config available to react componentHow can I access existing dom elements when using react render?web add-in load issues on Outlook desktop onlymapStateToProps() in Connect(EquipmentMetadata) must return a plain object. Instead received undefinedCalling functions in child components defined with forwardRef

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

For a couple of libraries on element observing, I require the ref prop to return an HTMLElement, however, 99% of MUI components don't do that. What am I missing? How can I get a reference to the root element of a component?

For a couple of libraries on element observing, I require the ref prop to return an HTMLElement, however, 99% of MUI components don't do that. What am I missing? How can I get a reference to the root element of a component?

import React, 
 useState, useRef
 from "react";
import ReactDOM from "react-dom";
import useInView from "react-hook-inview";
import 
 Card

from "@material-ui/core";

function App() 
 const container = useRef();
 const[inViewport, setInViewport] = useState(false);
 useInView(
 target: container,
 unobserveOnEnter: true,
 onEnter: () = > setInViewport(true)
 );
 console.log(container);
 return ( < Card ref = 
 container
 
 style = 
 
 textAlign: "center"
 
 >
 <h1>inViewport ? "In viewport" : "Not in viewport"</h1> < /Card>
 );


const rootElement = document.getElementById("root");
ReactDOM.render(<App / > , rootElement);

Live Demo here. You can see the logged ref is to withStyles instead of an HTMLElement reference.

javascript reactjs material-ui

share|improve this question

edited Mar 28 at 11:04

Jake Cattrall

asked Mar 28 at 10:30

Jake CattrallJake Cattrall

31711 silver badge1515 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you provide more code?
  
  – HRK44
  Mar 28 at 10:34
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @HRK44 I have updated the initial question with a full example.
  
  – Jake Cattrall
  Mar 28 at 11:04
  

  
  
  
  

add a comment
 | 

1

For a couple of libraries on element observing, I require the ref prop to return an HTMLElement, however, 99% of MUI components don't do that. What am I missing? How can I get a reference to the root element of a component?

For a couple of libraries on element observing, I require the ref prop to return an HTMLElement, however, 99% of MUI components don't do that. What am I missing? How can I get a reference to the root element of a component?

import React, 
 useState, useRef
 from "react";
import ReactDOM from "react-dom";
import useInView from "react-hook-inview";
import 
 Card

from "@material-ui/core";

function App() 
 const container = useRef();
 const[inViewport, setInViewport] = useState(false);
 useInView(
 target: container,
 unobserveOnEnter: true,
 onEnter: () = > setInViewport(true)
 );
 console.log(container);
 return ( < Card ref = 
 container
 
 style = 
 
 textAlign: "center"
 
 >
 <h1>inViewport ? "In viewport" : "Not in viewport"</h1> < /Card>
 );


const rootElement = document.getElementById("root");
ReactDOM.render(<App / > , rootElement);

Live Demo here. You can see the logged ref is to withStyles instead of an HTMLElement reference.

javascript reactjs material-ui

share|improve this question

edited Mar 28 at 11:04

Jake Cattrall

asked Mar 28 at 10:30

Jake CattrallJake Cattrall

31711 silver badge1515 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you provide more code?
  
  – HRK44
  Mar 28 at 10:34
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @HRK44 I have updated the initial question with a full example.
  
  – Jake Cattrall
  Mar 28 at 11:04
  

  
  
  
  

add a comment
 | 

For a couple of libraries on element observing, I require the ref prop to return an HTMLElement, however, 99% of MUI components don't do that. What am I missing? How can I get a reference to the root element of a component?

For a couple of libraries on element observing, I require the ref prop to return an HTMLElement, however, 99% of MUI components don't do that. What am I missing? How can I get a reference to the root element of a component?

import React, 
 useState, useRef
 from "react";
import ReactDOM from "react-dom";
import useInView from "react-hook-inview";
import 
 Card

from "@material-ui/core";

function App() 
 const container = useRef();
 const[inViewport, setInViewport] = useState(false);
 useInView(
 target: container,
 unobserveOnEnter: true,
 onEnter: () = > setInViewport(true)
 );
 console.log(container);
 return ( < Card ref = 
 container
 
 style = 
 
 textAlign: "center"
 
 >
 <h1>inViewport ? "In viewport" : "Not in viewport"</h1> < /Card>
 );


const rootElement = document.getElementById("root");
ReactDOM.render(<App / > , rootElement);

Live Demo here. You can see the logged ref is to withStyles instead of an HTMLElement reference.

javascript reactjs material-ui

share|improve this question

edited Mar 28 at 11:04

Jake Cattrall

asked Mar 28 at 10:30

Jake CattrallJake Cattrall

31711 silver badge1515 bronze badges

import React, 
 useState, useRef
 from "react";
import ReactDOM from "react-dom";
import useInView from "react-hook-inview";
import 
 Card

from "@material-ui/core";

function App() 
 const container = useRef();
 const[inViewport, setInViewport] = useState(false);
 useInView(
 target: container,
 unobserveOnEnter: true,
 onEnter: () = > setInViewport(true)
 );
 console.log(container);
 return ( < Card ref = 
 container
 
 style = 
 
 textAlign: "center"
 
 >
 <h1>inViewport ? "In viewport" : "Not in viewport"</h1> < /Card>
 );


const rootElement = document.getElementById("root");
ReactDOM.render(<App / > , rootElement);

share|improve this question

edited Mar 28 at 11:04

Jake Cattrall

asked Mar 28 at 10:30

Jake CattrallJake Cattrall

31711 silver badge1515 bronze badges

share|improve this question

edited Mar 28 at 11:04

Jake Cattrall

asked Mar 28 at 10:30

Jake CattrallJake Cattrall

31711 silver badge1515 bronze badges

asked Mar 28 at 10:30

Jake CattrallJake Cattrall

31711 silver badge1515 bronze badges

asked Mar 28 at 10:30

Jake CattrallJake Cattrall

31711 silver badge1515 bronze badges

1 Answer
1

active

oldest

votes

2

You can use the RootRef component for this purpose: https://material-ui.com/api/root-ref/#rootref-api

Since most of the Material-UI components in v3 are implemented as classes, a ref in those cases will point at the class instance (this is just the React behavior for class-based components). Material-UI provides the RootRef component as a way to get at the underlying DOM element.

For v4 of Material-UI, many (perhaps most/all by the time a stable version is released) of the components are being converted to function components and the ref behavior will then be different and many/most of them should then forward refs such that they provide access to the DOM element.

share|improve this answer

edited Mar 28 at 15:16

answered Mar 28 at 14:14

Ryan CogswellRyan Cogswell

11.1k11 gold badge1717 silver badges3434 bronze badges

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55395360%2fmaterial-ui-components-not-returning-an-htmlelement-reference%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

You can use the RootRef component for this purpose: https://material-ui.com/api/root-ref/#rootref-api

Since most of the Material-UI components in v3 are implemented as classes, a ref in those cases will point at the class instance (this is just the React behavior for class-based components). Material-UI provides the RootRef component as a way to get at the underlying DOM element.

For v4 of Material-UI, many (perhaps most/all by the time a stable version is released) of the components are being converted to function components and the ref behavior will then be different and many/most of them should then forward refs such that they provide access to the DOM element.

share|improve this answer

edited Mar 28 at 15:16

answered Mar 28 at 14:14

Ryan CogswellRyan Cogswell

11.1k11 gold badge1717 silver badges3434 bronze badges

add a comment
 | 

2

You can use the RootRef component for this purpose: https://material-ui.com/api/root-ref/#rootref-api

Since most of the Material-UI components in v3 are implemented as classes, a ref in those cases will point at the class instance (this is just the React behavior for class-based components). Material-UI provides the RootRef component as a way to get at the underlying DOM element.

For v4 of Material-UI, many (perhaps most/all by the time a stable version is released) of the components are being converted to function components and the ref behavior will then be different and many/most of them should then forward refs such that they provide access to the DOM element.

share|improve this answer

edited Mar 28 at 15:16

answered Mar 28 at 14:14

Ryan CogswellRyan Cogswell

11.1k11 gold badge1717 silver badges3434 bronze badges

add a comment
 | 

You can use the RootRef component for this purpose: https://material-ui.com/api/root-ref/#rootref-api

Since most of the Material-UI components in v3 are implemented as classes, a ref in those cases will point at the class instance (this is just the React behavior for class-based components). Material-UI provides the RootRef component as a way to get at the underlying DOM element.

For v4 of Material-UI, many (perhaps most/all by the time a stable version is released) of the components are being converted to function components and the ref behavior will then be different and many/most of them should then forward refs such that they provide access to the DOM element.

share|improve this answer

edited Mar 28 at 15:16

answered Mar 28 at 14:14

Ryan CogswellRyan Cogswell

11.1k11 gold badge1717 silver badges3434 bronze badges

share|improve this answer

edited Mar 28 at 15:16

answered Mar 28 at 14:14

Ryan CogswellRyan Cogswell

11.1k11 gold badge1717 silver badges3434 bronze badges

answered Mar 28 at 14:14

Ryan CogswellRyan Cogswell

11.1k11 gold badge1717 silver badges3434 bronze badges

answered Mar 28 at 14:14

Ryan CogswellRyan Cogswell

11.1k11 gold badge1717 silver badges3434 bronze badges