mpen mpen - 5 months ago 83
React JSX Question

React PropTypes DOM element?

How do I mark a property as having to be a DOM element?

This page says that

is actually a React element, so what's the equivalent for DOM element?


You can check if the passed property is instance of Element:

The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality. For example, the HTMLElement interface is the base interface for HTML elements, while the SVGElement interface is the basis for all SVG elements.

class Some extends React.Component {
  render() {
    return (
      <div> Hello </div>

const validateDOMElem = (props, propName, componentName) => {
  if (props[propName] instanceof Element === false) {
    return new Error(
      'Invalid prop `' + propName + '` supplied to' +
      ' `' + componentName + '`. Validation failed.'

Some.propTypes = {
  htmlElem: validateDOMElem,

const para = document.getElementById('para');

ReactDOM.render(<Some htmlElem={para} />, document.getElementById('app'));
<script src=""></script>
<script src=""></script>

<div id="app"></div>
<p id="para"></p>