react/jsx-sort-props

On a tag with many props, a fixed order makes a prop quick to find and keeps two people from adding the same one in different places.

Capital letters sort before lowercase ones. A spread splits the props into groups, and each group is sorted separately, because moving a prop across a spread can change which value wins.

--fix reorders the props.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/jsx-sort-props" = "error" # or "warn"

Every option, set to its default:

bunfig.toml

[lint.rules]
"react/jsx-sort-props" = ["error", {
  ignoreCase = false,
  callbacksLast = false,
  shorthandFirst = false,
  shorthandLast = false,
  multiline = "ignore", # "ignore", "first" or "last"
  reservedFirst = false,
  noSortAlphabetically = false,
  locale = "auto",
}]

Examples#

example.jsx1 problem

const button = <Button type="submit" disabled />;

example.jsxNo problems

const button = <Button disabled type="submit" />;

const link = <Link to="/home" {...rest} replace />;

Options#

Option	Default	What it does
`ignoreCase`	`false`	Ignore case when comparing names.
`callbacksLast`	`false`	Handlers such as `onClick` come after all other props.
`shorthandFirst`	`false`	Props without a value, such as `disabled`, come first.
`shorthandLast`	`false`	Props without a value come last.
`multiline`	`"ignore"`	Where props that span several lines go: `"first"` or `"last"`.
`reservedFirst`	`false`	`true` puts `children`, `key`, `ref` and, on HTML elements, `dangerouslySetInnerHTML` first. A list of some of these names puts only those first.
`noSortAlphabetically`	`false`	Only check the groups from the options above, not the alphabetical order.
`locale`	`"auto"`	With a locale such as `"en"`, compare names the way `localeCompare` does.

Within each group the props are still sorted alphabetically, unless noSortAlphabetically is set.

example.jsxwith { "callbacksLast": true }1 problem

const button = <Button onClick={save} type="submit" />;

example.jsxwith { "callbacksLast": true }No problems

const button = <Button type="submit" onClick={save} />;

example.jsxwith { "shorthandFirst": true }No problems

const input = <Input required name="email" />;

example.jsxwith { "shorthandLast": true }No problems

const input = <Input type="email" autoFocus />;

example.jsxwith { "multiline": "last" }No problems

const card = (
  <Card
    title="Profile"
    style={{
      margin: 0,
    }}
  />
);

example.jsxwith { "reservedFirst": true }No problems

const row = <Row key={item.id} active />;

example.jsxwith { "callbacksLast": true, "noSortAlphabetically": true }No problems

const button = <Button type="submit" disabled onClick={save} />;

example.jsx1 problem

const icon = <Toolbar align="left" Icon={Star} />;

example.jsxwith { "ignoreCase": true }No problems

const icon = <Toolbar align="left" Icon={Star} />;

example.jsxwith { "locale": "en" }No problems

const icon = <Toolbar align="left" Icon={Star} />;