132

I am storing a ref in my redux store and using mapStateToProps to expose the ref for components that need access to it.

The ref that is stored looks like:

ref={node => this.myRefToBePutInReduxGlobalStore = node}

What is the correct propType for this ref?

3
  • 8
    Because refs aren't serializable, it's not a good idea to put them into Redux store. Nonetheless, the value passed to ref prop is a function with the first argument a reference to DOM element or null. It's a function.
    – rishat
    Dec 28, 2017 at 13:07
  • 5
    You cannot use propType for refs, but you can use it for props. Since you are passing it to redux store then it's represented as a prop like this.props.myRefToBePutInReduxGlobalStore. myRefToBePutInReduxGlobalStore should be the type of node, so PropTypes.node should work for you
    – The Reason
    Dec 28, 2017 at 14:16
  • 1
    I think it should be PropType.object because ref is basically class instance which is object. Hence when you pass ref element as a props it would be of object type Jun 21, 2018 at 20:11

4 Answers 4

181

TL;DR

If you want to prop type a ref that only expects native DOM elements, such as a div or an input, the correct definition is the following:

refProp: PropTypes.oneOfType([
    // Either a function
    PropTypes.func, 
    // Or the instance of a DOM native element (see the note about SSR)
    PropTypes.shape({ current: PropTypes.instanceOf(Element) })
])

Answer to the specific issue described in the original post

In the OP question's example, it is not the ref prop type that needs to be declared, but the stuff pointed by the ref, and that will be passed from redux using mapStateToProps. Prop type for a DOM element would be: myRefToBePutInReduxGlobalStore: PropTypes.instanceOf(Element) (if it's a DOM element). Although, I would:

  1. Rename it to myElementToBePutInReduxGlobalStore (an element is not a ref)
  2. Avoid storing non-serializable data inside redux store
  3. Avoid passing elements in props as explained by React engineer Seb Markbage

Long answer to the actual question

Q: What is the correct proptype for a ref in React?

Example use case:

function FancyInput({ inputRef }) {
    return (
        <div className="fancy">
            Fancy input
            <input ref={inputRef} />
        </div>
    )
}

FancyInput.propTypes = {
    inputRef: ???   // What is the correct prop type here?
}

function App(props) {
    const inputRef = React.useRef()
    useLayoutEffect(function focusWhenStuffChange() {
        inputRef.current?.focus()
    }, [props.stuff])
    return <FancyInput inputRef={inputRef} />
}

Today, two kind of refs exist in react:

  1. An object which looks like this: { current: [something] }, usually created by React.createRef() helper or React.useRef() hook
  2. A callback function which will receive [something] as its argument (like the one in OP example)

Note: historically, you could also use a string ref, but it's considered legacy and will be removed from react

The second item is quite simple and requires the following prop type: PropTypes.func.

The first option is less obvious because you might want to specify the type of element pointed by the ref.

Many good answers

ref can point to something else than DOM element.

If you want to be totally flexible:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.any })
])

The above just enforces the shape of object ref w/ current property. It will work at all time for any kind of ref. For the purpose of using prop type, which is a way to spot any inconsistencies when you develop, this is probably enough. It seems very unlikely that an object with shape { current: [any] }, and is passed to a refToForward prop, would not be an actual ref.

However, you might want to declare that your component does not expect any kind of ref, but only a certain type, given what it needs that ref for.

I have setup a sandbox showcasing a few different way to declare a ref, even some non conventional, and then testing them with many prop types. You can find it here.


If you only expect a ref pointing to a native input element, not any HTML Element:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.instanceOf(HTMLInputElement) })
])

If you only expect a ref pointing to a React class component:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.instanceOf(Component) })
])

If you only expect a ref pointing to a functional component using useImperativeHandle to expose some public method:

refProp: PropTypes.oneOfType([
    PropTypes.func, 
    PropTypes.shape({ current: PropTypes.object })
])

Note: the above prop type is interesting because it also covers react components and native DOM elements, because they all are inheriting the base javascript Object


There is no single good way to declare the prop type for a ref, it depends of the usage. If your ref points to something very identified, it can be worth adding a specific prop type. Otherwise, just checking the general shape seems enough.


Note about server side rendering

If your code has to run on the server, unless you already polyfill DOM environment, Element or any other client-side type will be undefined in NodeJS. You can use the following shim to support it:

Element = typeof Element === 'undefined' ? function(){} : Element

The following React Docs pages gives more insight on how to use refs, both object and callbacks, and also how to use useRef hook

Answer updated thank to @Rahul Sagore, @Ferenk Kamra, @svnm, and @Kamuela Franco

6
  • 4
    It gives Element is not defined on server side rendering. Any solution to that? Jan 8, 2019 at 11:14
  • 1
    Good point. What about this shim: Element = typeof Element === 'undefined' ? function(){} : Element (suggested by Ryan Florence in some github issue). If it works for you I can add it to my answer.
    – Pandaiolo
    Jan 9, 2019 at 12:08
  • 1
    I figured it out and added this if (!isBrowser) { global.Element = null; }. Worked for me. isBrowser = typeof window !== 'undefined'; Jan 9, 2019 at 12:33
  • 1
    Great answer. I would love the TL;DR to be at the top of the response. Jan 21, 2020 at 12:09
  • 1
    DO NOT USE THIS. Element is undefined on production builds(specifically gatsby builds). you should better explain from where you imported this Element Jul 13, 2021 at 11:56
24

Very similar to @Pandaiolo's post,

PropTypes.elementType has now been added

forwardedRef: PropTypes.oneOfType([
  PropTypes.func,
  PropTypes.shape({ current: PropTypes.instanceOf(Element) })
]),

PropTypes.instanceOf(Element) looks to be the correct way to do this now as mentioned by Ferenc

3
  • 1
    Thanks @svnm, I have updated my answer to reflect this, which makes it simpler!
    – Pandaiolo
    Sep 2, 2019 at 16:49
  • 2
    In the end, that elementType was not working for me, so I actually tested a bunch of prop types on different kind of components that can be pointed by a ref, in a sandbox. Here are the results: codesandbox.io/s/loving-benz-w6fbh. I'm not sure I covered all possibilities, but it seems that the correct proptype for DOM element is instanceOf(Element) (or object), for a class it is instanceOf(Component) (or object) and for the specific use case of a functional component using useImperativeHandle it is object. Thoughts?
    – Pandaiolo
    Sep 7, 2019 at 23:27
  • This does not work, its a wrong answer. PropTypes.elementType is used to check if a prop is a React element type, not a native DOM element. See here: github.com/facebook/prop-types/issues/334 and here: github.com/facebook/prop-types/pull/211
    – sydd
    Aug 23, 2022 at 8:43
10

I only check for the preferred way and since PropType.object is not very valuable I ended up using this:

PropTypes.shape({ current: PropTypes.instanceOf(Element) })
3

I checked all the above answers but I get a warning from the react, so I researched a lot and I got the right answer.

import React, { Component } from 'react';

ComponentName.propTypes = {
  reference: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.shape({ current: PropTypes.instanceOf(Component) }),
  ]),
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.