logoESLint React

context-name

Enforces identifier names assigned from 'createContext' calls to be a valid component name with the suffix 'Context'.

Full Name in eslint-plugin-react-naming-convention

react-naming-convention/context-name

Full Name in @eslint-react/eslint-plugin

@eslint-react/naming-convention-context-name

Presets

naming-convention recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

Enforces that the context has a valid component name with the suffix Context.

Examples

Naming context without the Context suffix

// Problem: Context name should end with 'Context'
const theme = createContext("");
// Problem: Context name should end with 'Context'
const Theme = createContext("");
// Problem: Context name should be PascalCase and end with 'Context'
const themecontext = createContext("");
// Problem: Context name should be PascalCase and end with 'Context'
const themeContext = createContext("");
// Problem: Context name should be PascalCase and end with 'Context'
const context = createContext("");
// Problem: Context name must end with 'Context' (not just contain it)
const ThemeContext2 = createContext("");
// Problem: Context name should be PascalCase and end with 'Context'
obj.nested.theme = createContext("");

Naming context correctly

// Recommended: PascalCase with 'Context' suffix
const ThemeContext = createContext("");
// Recommended: PascalCase with 'Context' suffix
const Context = createContext("");
// Recommended: PascalCase with 'Context' suffix (MemberExpression)
obj.nested.ThemeContext = createContext("");
// Recommended: PascalCase with 'Context' suffix (class property)
class Foo { ThemeContext = createContext(""); }
// OK: Not assigned to an identifier or member expression, so there is no name to validate
export default createContext("");

Versions

Resources

Further Reading

On this page