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.

Configuration

This rule accepts a configuration object with the following properties:

mode

type: "syntax" | "element"

default: "syntax"

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