Skip to content

[jsx-curly-spacing]: Add Option To Specify Spacing For Spread Props #3527

Open
@sotobry

Description

@sotobry

Hello there, it would be nice to have the option in the react/jsx-curly-spacing rule to specify whether spaces should be added for props that are spread.

This is what I would like:

<CustomComp prop1={{ key1: value1 }} prop2={value2} /> // if JSX attributes are not spread props, then remove spaces
<CustomComp { ...{ prop3, prop4 } } />                 // if JSX attributes are spread props, then add spaces

<CustomComp prop1={{ key1: value1 }} prop2={value2} { ...{ prop3, prop4 } } />

If I set the rule to this:

'react/jsx-curly-spacing': [ 'error', 'always' ]

Then, my code is formatted into this:

<CustomComp prop1={ { key1: value1 } } prop2={ value2 } /> // spaces added for props that are not spread
<CustomComp { ...{ prop3, prop4 } } />                     // spaces added for props that are spread

But if I set the rule to this:

'react/jsx-curly-spacing': [ 'error', 'never' ]

Then, my code is formatted into this:

<CustomComp prop1={{ key1: value1 }} prop2={value2} /> // spaces removed for props that are not spread
<CustomComp {...{ prop3, prop4 }} />                   // spaces removed for props that are spread

Yes, I know that Airbnb's style guide requires that the spaces be omitted for all props, including spread props, and so I'm proposing giving the option to making an exception for when the props are spread.

Maybe it could look something like this?

'react/jsx-curly-spacing': [
    'error',
    {
      when: 'never',
      attributes: { when: 'never', allowMultiline: false },
      children: { when: 'always' },
      spacing: { objectLiterals: 'never' },
      spreadProps: { when: 'always' }  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    },
  ],

Could this option be added, pretty please? It's my birthday today 🥺

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions