Repository files navigation

Specify a specific order of props or use named groups with loose ordering within each group.

This rule checks all JSX components and verifies that all props are sorted correctly.

..."jsx-grouped-sort-props/jsx-grouped-sort-props":[<enabled>, [{group:"reserved"},  "foo",  "bar",{group:"html"},{group:"aria"},{group:"data"},{group:"other"},{group:"callback"}]]...

All reserved props, as listed in theReact docs.

<Buttonkey="1"ref="button"/>

All props that map to supported html attributes, as listed in theReact docs.

<ButtonclassName="goodbye"/>

All aria-* attributes. If not specified, aria-* attributes will be considered part of thehtml group.

<Buttonaria-label="Submit"/>

All custom data-* attributes. If not specified, data-* attributes will be considered part of thehtml group.

<Buttondata-id="submit"/>

All props that match the patternonCallback.

<ButtononClick={onClick}/>

All props that do not match a different group.

<ButtonisLoading={true}/>

This rule is a formatting preference and not following it won't negatively affect the quality of your code. If prop sort order isn't a part of your coding standards, then you can leave this rule off.