Documentation
Rules
avoid-shorthand-fragment

prefer-shorthand-fragment

Rule category

Style.

What it does

Enforces the usage of fragment shorthand syntax.

Examples

Failing

import React from "react";
 
function function Example(): React.JSX.ElementExample() {
  return (
    <>
      <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />
      <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />
    </>
  );
}

Passing

import React, { 
const Fragment: React.ExoticComponent<{
    children?: React.ReactNode | undefined;
}>
Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx
import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>
```@example```tsx
// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>
```
Fragment } from "react";
 
function function Example(): React.JSX.ElementExample() {
  return (
    <
const Fragment: React.ExoticComponent<{
    children?: React.ReactNode | undefined;
}>
Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx
import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>
```@example```tsx
// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>
```
Fragment>
      <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />
      <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />
    </
const Fragment: React.ExoticComponent<{
    children?: React.ReactNode | undefined;
}>
Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx
import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>
```@example```tsx
// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>
```
Fragment>
  );
}
avoid-shorthand-booleanensure-forward-ref-using-ref