Skip to content

Commit

Permalink
[docs] Add How can I access the DOM element? in the FAQ (#9768)
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Jan 7, 2018
1 parent 7df08a0 commit 962438a
Showing 1 changed file with 38 additions and 0 deletions.
38 changes: 38 additions & 0 deletions docs/src/pages/getting-started/frequently-asked-questions.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,44 @@ export default compose(
export default withTheme()(withStyles(styles)(Modal));
```

## How can I access the DOM element?

You can use the `ref` property in conjunction to the [`findDOMNode()`](https://reactjs.org/docs/react-dom.html#finddomnode) React API. Or you can [use an abstraction](https://github.com/facebook/react/issues/11401#issuecomment-340543801):

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

class RootRef extends React.Component {
componentDidMount() {
this.props.rootRef(ReactDOM.findDOMNode(this))
}

componentWillUnmount() {
this.props.rootRef(null)
}

render() {
return this.props.children
}
}

RootRef.propTypes = {
children: PropTypes.element.isRequired,
rootRef: PropTypes.func.isRequired,
};

export default RootRef;
```

Usage:
```jsx
<RootRef rootRef={node => { console.log(node) }}>
<Paper />
</RootRef>
```

## Material-UI is awesome. How can I support the project?

There are a lot of ways to support Material-UI:
Expand Down

0 comments on commit 962438a

Please sign in to comment.