|
| 1 | +# Ensure spread props come before other props (spread-props-first) |
| 2 | + |
| 3 | +Spread props should come before other named props to avoid unintentionally overriding props. When spread props are placed after named props, they can override the named props, which is often unintended and can lead to UI bugs. |
| 4 | + |
| 5 | +## Rule details |
| 6 | + |
| 7 | +This rule enforces that all spread props (`{...rest}`, `{...props}`, etc.) come before any named props in JSX elements. |
| 8 | + |
| 9 | +👎 Examples of **incorrect** code for this rule: |
| 10 | + |
| 11 | +```jsx |
| 12 | +/* eslint primer-react/spread-props-first: "error" */ |
| 13 | + |
| 14 | +// ❌ Spread after named prop |
| 15 | +<Example className="..." {...rest} /> |
| 16 | + |
| 17 | +// ❌ Spread in the middle |
| 18 | +<Example className="..." {...rest} id="foo" /> |
| 19 | + |
| 20 | +// ❌ Multiple spreads after named props |
| 21 | +<Example className="..." {...rest} {...other} /> |
| 22 | +``` |
| 23 | + |
| 24 | +👍 Examples of **correct** code for this rule: |
| 25 | + |
| 26 | +```jsx |
| 27 | +/* eslint primer-react/spread-props-first: "error" */ |
| 28 | + |
| 29 | +// ✅ Spread before named props |
| 30 | +<Example {...rest} className="..." /> |
| 31 | + |
| 32 | +// ✅ Multiple spreads before named props |
| 33 | +<Example {...rest} {...other} className="..." /> |
| 34 | + |
| 35 | +// ✅ Only spread props |
| 36 | +<Example {...rest} /> |
| 37 | + |
| 38 | +// ✅ Only named props |
| 39 | +<Example className="..." id="foo" /> |
| 40 | +``` |
| 41 | + |
| 42 | +## Why this matters |
| 43 | + |
| 44 | +Placing spread props after named props can cause unexpected behavior: |
| 45 | + |
| 46 | +```jsx |
| 47 | +// ❌ Bad: className might get overridden by rest |
| 48 | +<Button className="custom-class" {...rest} /> |
| 49 | + |
| 50 | +// If rest = { className: "other-class" } |
| 51 | +// Result: className="other-class" (custom-class is lost!) |
| 52 | + |
| 53 | +// ✅ Good: className will override any className in rest |
| 54 | +<Button {...rest} className="custom-class" /> |
| 55 | + |
| 56 | +// If rest = { className: "other-class" } |
| 57 | +// Result: className="custom-class" (as intended) |
| 58 | +``` |
| 59 | + |
| 60 | +## Options |
| 61 | + |
| 62 | +This rule has no configuration options. |
| 63 | + |
| 64 | +## When to use autofix |
| 65 | + |
| 66 | +This rule includes an autofix that will automatically reorder your props to place all spread props first. The autofix is safe to use as it preserves the order of spreads relative to each other and the order of named props relative to each other. |
0 commit comments