[react/jsx-max-props-per-line] Consider line-length

[jens-duttke]

There should be an option which also considers the number of characters in the specific line.

If I have shorter lines like:

<input type="email" name="email" autoComplete="on" minLength={5} onChange={handleChange} />

it shouldn't warn, but for longer lines, with the same amount of properties it should:

<div role="button" aria-label={i18n.MENU_BUTTON_LABEL} tabIndex={0} onClick={visibilityState !== VisibilityState.SHOWN ? showNavigation : hideNavigation} onKeyPress={Utils.dispatchClickOnActionKey}>

because adding line-breaks in the first case, makes the code more unreadable, while in the second case it get's more readable.

If I have just one prop, but with a very long value, it shouldn't be enforced to move it into a separate line, but for the same number characters in two props, the readability could improved with a line-break.

My setup would then looks like:

'react/jsx-max-props-per-line': ['error', { maximum: 1, minimumLength: 120 }],

[ljharb]

Since "considering line length" is a horrifically poor way to manage complexity (i just disable the max-len rule entirely; it doesn't add value), I don't think this would be a good thing to add.

[jens-duttke]

Good point, but simply replacing the number of characters by the number of props does not add value either.

For me, the combination of both would be a good middle ground - not perfect, but better than just considering the line length, or just the number of props.

Fortunately, there is not just one all-encompassing rule, but quite a few, so everyone can customize their linting according to their needs.
Such an option would add value for me.