react18-string-refs
Provides exact migration patterns for React string refs (ref="name" + this.refs.name) to React.createRef() in class components. Use this skill whenever migrating string ref usage - including single element refs, multiple refs in a component, refs in lists, callback refs, and refs passed to child components. Always use this skill before writing any ref migration code - the multiple-refs-in-list pattern is particularly tricky and this skill prevents the most common mistakes. Use it for React 18.3.1 migration (string refs warn) and React 19 migration (string refs removed).
Profile →npx skills add github/awesome-copilot --skill react18-string-refs --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# React 18 String Refs Migration String refs (`ref="myInput"` + `this.refs.myInput`) were deprecated in React 16.3, warn in React 18.3.1, and are **removed in React 19**. ## Quick Pattern Map | Pattern | Reference | |---|---| | Single ref on a DOM element | [→ patterns.md#single-ref](references/patterns.md#single-ref) | | Multiple refs in one component | [→ patterns.md#multiple-refs](references/patterns.md#multiple-refs) | | Refs in a list / dynamic refs | [→ patterns.md#list-refs](references/patterns.md#list-refs) | | Callback refs (alternative approach) | [→ patterns.md#callback-refs](references/patterns.md#callback-refs) | | Ref passed to a child component | [→ patterns.md#forwarded-refs](references/patterns.md#forwarded-refs) | ## Scan Command ```bash # Find all string ref assignments in JSX grep -rn 'ref="' src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." # Find all this.refs accessors grep -rn "this\.refs\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." ``` Both should be migrated together - find the `ref="name"` and the `this.refs.name` accesses for each component as a pair. ## The Migration Rule Every string ref migrates to `React.createRef()`: 1.
- Quick Pattern Map
- Scan Command
- The Migration Rule
Find all string ref assignments in JSX grep -rn 'ref="' src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." Find all this.refs accessors grep -rn "this\.refs\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."
What does the react18-string-refs skill do?
Provides exact migration patterns for React string refs (ref="name" + this.refs.name) to React.createRef() in class components. Use this skill whenever migrating string ref usage - including single element refs, multiple refs in a component, refs in lists, callback refs, and refs passed to child components. Always use this skill before writing any ref migration code - the multiple-refs-in-list pattern is particularly tricky and this skill prevents the most common mistakes. Use it for React 18.3.1 migration (string refs warn) and React 19 migration (string refs removed).
How do I install it?
Run `npx skills add github/awesome-copilot --skill react18-string-refs --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From github/awesome-copilot, a repository with 37,432 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.