I am specifying a required function proptype in a react (version 0.13.3) component...

var MyComponent = React.createClass({
    propTypes : {
        onClick : React.PropTypes.func.isRequired
    },

    handleClick(event) {
        this.props.onClick(event, clickCallback);
    },

    clickCallback() {
        console.log("foo");
    },

    render() {
        return <div onClick={this.handleClick}></div>
    }
});

export default MyComponent;

As you can see my onClick prop not only needs to be a function but needs to accept 2 arguments. is there any way to specify this using React PropTypes?

I have read the React docs entry on re-usable components and there seems to be only a way to define the shape of an object type but not a function type.

I am specifying a required function proptype in a react (version 0.13.3) component...

var MyComponent = React.createClass({
    propTypes : {
        onClick : React.PropTypes.func.isRequired
    },

    handleClick(event) {
        this.props.onClick(event, clickCallback);
    },

    clickCallback() {
        console.log("foo");
    },

    render() {
        return <div onClick={this.handleClick}></div>
    }
});

export default MyComponent;

As you can see my onClick prop not only needs to be a function but needs to accept 2 arguments. is there any way to specify this using React PropTypes?

I have read the React docs entry on re-usable components and there seems to be only a way to define the shape of an object type but not a function type.

• javascript
• reactjs

• What do you mean by "shape"? The content of passed argument? If I understood you right, Flow could be an answer to that: flowtype.org – Samuli Hakoniemi Commented Oct 22, 2015 at 10:35
• @zvona I will amend my question to be more clear but basically I want to specify that this.props.onClick is a function, and that it accepts 2 parameters. – danbahrami Commented Oct 22, 2015 at 10:39
• AFAIK, there's no way to do that internally in React. But please, check Flow, it has type annotations and required arguments defined. When you run the flow, it'll capture these errors (like too few arguments) and display them in the terminal. – Samuli Hakoniemi Commented Oct 22, 2015 at 10:51
• And now I understood what you mean by shapes. There's React.PropTypes.shape, but apparently that can't be used with functions. – Samuli Hakoniemi Commented Oct 22, 2015 at 10:58
• @zvona yes, thanks for the help - I'll have a look at flow. although it seems this will be moot when we get type hinting in ES7 – danbahrami Commented Oct 22, 2015 at 11:00

2 Answers 2

You could try using a custom validator:

propTypes : {
    onClick : function(props, propName, componentName) {
        var fn = props[propName];
        if(!fn.prototype ||
           (typeof fn.prototype.constructor !== 'function' &&
            fn.prototype.constructor.length !== 2)) {
            return new Error(propName + 'must be a function with 2 args');
        }
    }
}

Ok, I checked this a bit, and this could be the answer (unable to test it right now). So, you can pass validating functions for PropTypes, like:

propTypes : {
  onClick : function(props, propName, componentName) {
    if (!props.event || !props.callback) {
       return new Error('Too few arguments');
    }
  }
}

Check this article for details: http://developer.fortnox.se/blog/proptypes-in-react-js/