diff --git a/react/README.md b/react/README.md index 493e51e..3eaa557 100644 --- a/react/README.md +++ b/react/README.md @@ -1,6 +1,6 @@ # `import {React} from 'Shopify'` -This guide provides a few guidelines on writing sensible React. Many of these rules are enforced by our [shared ESLint configuration](../packages/eslint-plugin-shopify), which makes use of the excellent [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) project. +This guide provides a few guidelines on writing sensible React. Many of these rules are enforced by our [shared ESLint configuration](../packages/eslint-plugin-shopify), which makes use of the excellent [eslint-plugin-react](https://github.com/Shopify/web-configs/tree/main/packages/eslint-plugin) project. @@ -565,26 +565,26 @@ function GoodComponent({disabled = false}) { } } ``` - + - [5.9](#5.9) Components should not accept `style` or `className` as props. Prefer props that signal a particular variation on the component over allowing arbitrary customization. > Why? Allowing custom styles or class names vastly increases the surface area of your component’s API. This makes the component harder to maintain since you must account for every set of class names, style objects, and their interplay with your component’s base styles. Meaningful variations are better suited to maintaining a design system, and make it simpler for consumers to use your component. [This article](https://medium.com/brigade-engineering/don-t-pass-css-classes-between-components-e9f7ab192785#.67kv95pms) provides additional details on why accepting classes or styles is a bad idea. - + ESLint rule: [`forbid-component-props`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md) - + ```js // bad function BadComponent({className}) { return
; } - +