Skip to content

Add Rule option "disallowedFor" for component prop #3422

@jacketwpbb

Description

@jacketwpbb

Suppose we have a component that accept a prop named string.

function Comp(props) {
    return <div>{props.string}</div>;
}

function App() {
    return <Comp string="213"  />;
}

As needs change, we need to replace string prop by another named number.

function Comp(props) {
    return <div>{props.number || props.string}</div>;
}
Comp.propTypes = {
    number: PropTypes.number,
    /**
     * @deprecated use number instead
     */
    string: PropTypes.string
};
Comp.defaultProps = {
    string: '123',
    number: 123
};

The string prop will works in a period of time, but it's better to replace it with number prop.
This rule option can be use to avoid using deprecated prop for Comp.

{
"react/forbid-component-props": [
    "error", { "forbid": [{"propName": "string", "disallowedList": ["Comp"]}] }
  ]
}

image

Activity

ljharb

ljharb commented on Sep 8, 2022

@ljharb
Member

Since it's marked as deprecated with jsdoc, there's eslint-plugin-deprecated - and if you're using TS, it will catch it too.

Why can't you just remove it and make a major bump?

cincodenada

cincodenada commented on Mar 28, 2023

@cincodenada

Hello, I would also like this: my use case is for discouraging the usage of props in components that I don't control, and thus can't annotate or alter the component myself.

Specifically, I want to disallow the required parameter on Ant Design's Form.Item to avoid confusion with a require parameter I'm adding in HOCs that we create. And generally I dislike the required parameter in Ant Design 4.x even without the conflicting HOC parameter, I find it inherently confusing - it only applies styling, and doesn't actually enforce validation, which is very surprising to me.

I could wrap Form.Item in an HOC and use that instead, but that doesn't prevent others from using the original component, so it doesn't really get me very far. I also don't want to create an HOC and than ban the original altogether, because that would be a much larger change for not a lot of benefit.

I want to be able to mark props as disallowed in libraries that I don't control, and allowedFor on this rule seems like the way to accomplish that. I'm not often one to question library's decisions, sometimes there are exceptions and I want to just avoid using a feature because it is too confusing or troublesome, and this is one of those cases.

ljharb

ljharb commented on Apr 14, 2023

@ljharb
Member

@cincodenada you can prevent them from using the original component using no-restricted-imports and/or no-restricted-properties, fwiw.

That said, thanks, that is a reasonable use case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @ljharb@cincodenada@jacketwpbb

      Issue actions

        Add Rule option "disallowedFor" for component prop · Issue #3422 · jsx-eslint/eslint-plugin-react