logoESLint React
Rules

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

  • core
  • recommended
  • recommended-typescript
  • recommended-type-checked

Description

Replaces usages of <Context.Provider> with <Context>.

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

In addition, it is recommended to enable the naming-convention/context-name rule to enforce consistent naming conventions for contexts.

Examples

Before

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

After

import React from "react";
import ThemeContext from "./ThemeContext";
 
function App({ children }) {
  return (
    <ThemeContext value="dark">
      {children}
    </ThemeContext>
  );
}

Implementation

Further Reading


See Also

On this page