SkillsAdd

github/awesome-copilot

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…

First seen Apr 9, 2026

Installation

$ npx skills add github/awesome-copilot --skill react18-string-refs
View on skills.sh ↗ GitHub repository ↗

Summary

  • 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).

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
azure-hosted-copilot-sdk Same topic
microsoft/azure-skills 440.4K installs
vercel-composition-patterns Same topic
vercel-labs/agent-skills 326.5K installs
supabase Same topic
supabase/agent-skills

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge F…

263K installs
vercel-react-native-skills Same topic
vercel-labs/agent-skills 205.5K installs
vercel-react-view-transitions Same topic
vercel-labs/agent-skills 115.9K installs

Also in this package

Other skills from github/awesome-copilot · top by installs.

npx skills add github/awesome-copilot
git-commit 44.5K excalidraw-diagram-generator 29.1K documentation-writer 26.2K multi-stage-dockerfile 23.4K prd 22.9K gh-cli 21.9K refactor 21.6K java-springboot 19.9K create-readme 18.1K playwright-generate-test 18K

Browse all from github/awesome-copilot

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 38.8K
License LICENSE
Default branch main
Open issues 21
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Declared agents github-copilot

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,120 B
  • docs SUMMARY.md 603 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 796 installs

SKILL.md

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

# 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. Add refName = React.createRef(); as a class field (or in constructor)
  2. Replace ref="refName" → ref={this.refName} in JSX
  3. Replace this.refs.refName → this.refName.current everywhere

Read references/patterns.md for the full before/after for each case.