React PropTypes DOM element?

Question

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

This page says that PropTypes.element is actually a React element, so what's the equivalent for DOM element?

Do you mean type of DOM element? Checking for a specific type could be done with a custom prop checker against `someNode.constructor.name`. — Matthew Herbst, Sep 09 '16 at 01:14
@MatthewHerbst No, I mean *any* DOM element. `div`, `span`, `input`, whatever. — mpen, Sep 09 '16 at 02:22
div, span, input are also react elements. They get translated to DOM elements only later. — vijayst, Sep 09 '16 at 05:04
@vijayst Even if they're fetched with `document.getElementById` or created with `document.createElement` and **not** `React.createElement("input")`? — mpen, Sep 09 '16 at 15:41
@elmeister `node` is too loose. It includes numbers, strings and arrays. — mpen, Sep 09 '16 at 15:41
React.PropTypes.node logs a warning Failed prop type: Invalid prop — Alessander França, Nov 23 '16 at 16:39

score 40 · Accepted Answer · answered Jun 21 '18 at 11:08

40

PropTypes.instanceOf(Element)

Is working for me. You can also add isRequired:

PropTypes.instanceOf(Element).isRequired

answered Jun 21 '18 at 11:08

Gregory Bolkenstijn

9,055
7
33
38

Is there a nodejs equivalent? – Greg Aug 15 '19 at 14:23
1

You can now use `PropTypes.elementType` as explained here: https://stackoverflow.com/questions/48007326/what-is-the-correct-proptype-for-a-ref-in-react/51127130#51127130 – Pandaiolo Sep 05 '19 at 23:09
Expanding this answer to include the difference between how to do it with a div vs an imported component could get you some extra rep, just saying – Erik Grosskurth Feb 20 '20 at 23:21
1

You should avoid using this if you SSR your app because `Element` will be `undefined` in nodejs. If you strip out your PropTypes from your production build you will be fine there. But even so, you'll throw an error in the development build. – Carl von Buelow Jun 13 '20 at 03:43

Hardy · Answer 2 · 2016-09-09T11:55:06.707

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="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

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

It is also possible not to create a custom validator and use `PropTypes.instanceOf(Element)` — Mikhail Radionov, Mar 21 '17 at 14:57

score 6 · Answer 3 · answered Apr 25 '17 at 13:42

6

For example with a list component:

MyList.propTypes = {
  children: PropTypes.instanceOf(<li></li>),
}

Works for me.

answered Apr 25 '17 at 13:42

rvantonisse

61
1
1

5

I get warning `Failed prop type: Right-hand side of 'instanceof' is not callable` if I use this, does this not work anymore in 2019? – micnil Sep 07 '19 at 19:26

React PropTypes DOM element?

3 Answers3