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
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
Further Reading
See Also
no-forward-ref
Replaces usages offorwardRef
with passingref
as a prop.no-use-context
Replaces usages ofuseContext
withuse
.