no-context-provider

Full Name in eslint-plugin-react-x

react-x/no-context-provider

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-context-provider

Features

🔄

Presets

x recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

In React 19, you can render <Context> as a provider instead of <Context.Provider>.

This rule works best in codebases that follow the naming-convention/context-name rule.

Common Violations

Invalid

import ThemeContext from "./ThemeContext";

function App({ children }) {
  return (
    <ThemeContext.Provider value="light">
      {children}
    </ThemeContext.Provider>
  );
}

Valid

import ThemeContext from "./ThemeContext";

function App({ children }) {
  return (
    <ThemeContext value="dark">
      {children}
    </ThemeContext>
  );
}

Rule Details

Common Violations

Invalid

Valid

Resources

Further Reading

See Also

On this page