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

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

• Rule source
• Test source

Further Reading

• React Blog: <Context> as a provider

See Also

• no-forward-ref
  Replaces usages of forwardRef with passing ref as a prop.
• no-use-context
  Replaces usages of useContext with use.