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

What it does

Disallows using <Context.Provider>.

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

A safe codemod is available for this rule.

Examples

Failing

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

Passing

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

Implementation

• Rule source
• Test source

Further Reading

• React: <Context> as a provider

See Also

• no-forward-ref
  Disallows using React.forwardRef.
• no-use-context
  Disallows using React.useContext.