Merge pull request #902 from KevinGrandon/no_string_refs

[eslint config] [react] [breaking] Prevent using string refs.
airbnb · Jun 28, 2016 · 17b773e · 17b773e
2 parents 34a9f07 + 36d1561
commit 17b773e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js
@@ -143,7 +143,7 @@ module.exports = {
 
     // Prevent using string references
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md
-    'react/no-string-refs': 0,
+    'react/no-string-refs': 2,
 
     // Prevent usage of unknown DOM property
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md

diff --git a/react/README.md b/react/README.md
@@ -12,6 +12,7 @@
   1. [Quotes](#quotes)
   1. [Spacing](#spacing)
   1. [Props](#props)
+  1. [Refs](#refs)
   1. [Parentheses](#parentheses)
   1. [Tags](#tags)
   1. [Methods](#methods)
@@ -299,6 +300,22 @@
   ))}
   ```
 
+## Refs
+
+  - Always use ref callbacks. eslint: [`react/no-string-refs`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md)
+
+    ```jsx
+    // bad
+    <Foo
+      ref="myRef"
+    />
+
+    // good
+    <Foo
+      ref={(ref) => this.myRef = ref}
+    />
+    ```
+
 ## Parentheses
 
   - Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md)