Eslint-plugin-react: forbid-foreign-prop-types: Allow setting propTypes

[dimitarnestorov]

To use PropTypes.instanceOf and avoid circular dependencies I need to set propTypes outside of the "target" component. However forbid-foreign-prop-types kicks in.

const PropTypes = require(`prop-types`);
const React = require(`react`);

const B = require(`./B`);

class A extends React.Component {
    render(){
        return <B me={this} />;
    }
}

B.propTypes.prop = PropTypes.instanceOf(A).isRequired;

module.exports = A;

[ljharb]

You shouldn't need to do this to avoid circular dependencies - B should never be mutated outside of its own module.

How are you exporting A and B?

[dimitarnestorov]

B is only exposed to A. And I modified the snippet to include an export. A is used by the outside world.

[ljharb]

If B is requireable, then it's just as exposed as A :-) However, if you're going to have circular dependencies - something you should avoid strenuously - you can't use the otherwise best practice of module.exports =. Do exports.A = A; and exports.B = B, and then your circular dependencies will work fine.

[dimitarnestorov]

Doesn't work, probably because my environment is react-native

[dimitarnestorov]

Actually I don't think passing a component instance to a child is a good practice. I'm even thinking of a rule that throws when such behaviour is present.

Switching to PropTypes.shape and closing.

[ljharb]

Indeed; I’d recommend passing an element instead :-)