react/jsx-fragments Style

🛠️ An auto-fix is available for this rule.

What it does

Enforces the shorthand or standard form for React Fragments.

Why is this bad?

Makes code using fragments more consistent one way or the other.

Options

{ "mode": "syntax" | "element" }

syntax mode

This is the default mode. It will enforce the shorthand syntax for React fragments, with one exception. Keys or attributes are not supported by the shorthand syntax, so the rule will not warn on standard-form fragments that use those.

Examples of incorrect code for this rule:

<React.Fragment>
  <Foo />
</React.Fragment>;

Examples of correct code for this rule:

<>
  <Foo />
</>;

<React.Fragment key="key">
  <Foo />
</React.Fragment>;

element mode

This mode enforces the standard form for React fragments.

Examples of incorrect code for this rule:

<>
  <Foo />
</>;

Examples of correct code for this rule:

<React.Fragment>
  <Foo />
</React.Fragment>;

<React.Fragment key="key">
  <Foo />
</React.Fragment>;

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny react/jsx-fragments --react-plugin

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-fragments": "error"
  }
}

References

• Rule Source