jsx-curly-newline.md

Enforce linebreaks in curly braces in JSX attributes and expressions. (react/jsx-curly-newline)

Many style guides require or disallow newlines inside of jsx curly expressions.

Fixable: This rule is automatically fixable using the --fix flag on the command line.

Rule Details

This rule enforces consistent linebreaks inside of curlies of jsx curly expressions.

Rule Options

This rule has a string option:

• consistent enforces either both of linebreaks around curlies are present, or none are present.
• multiline enforces that when the contained expression spans multiple line, require both linebreaks. When the contained expression is single line, disallow both line breaks.
• multiline-lax (default) enforces that when the contained expression spans multiple line, require both linebreaks. When the contained expression is single line, disallow inconsistent line break.

consistent

When consistent is set, the following patterns are considered warnings:

<div>
  { foo
  }
</div>

<div>
  {
    foo }
</div>

The following patterns are not warnings:

<div>
  { foo }
</div>

<div>
  { 
    foo
  }
</div>

multiline

When multiline is set, the following patterns are considered warnings:

<div>
  { foo &&
    foo.bar }
</div>

<div>
  {
    foo
  }
</div>

<div>
  { foo
  }
</div>

The following patterns are not warnings:

<div>
  { 
    foo &&
    foo.bar
  }
</div>

<div>
  { foo }
</div>

multiline-lax

When multiline-lax (default) is set, the following patterns are considered warnings:

<div>
  { foo &&
    foo.bar }
</div>

<div>
  { foo
  }
</div>

The following patterns are not warnings:

<div>
  { 
    foo &&
    foo.bar
  }
</div>

<div>
  { 
    foo
  }
</div>

<div>
  { foo }
</div>

When Not To Use It

You can turn this rule off if you are not concerned with the consistency around the linebreaks inside of JSX attributes or expressions.