355bd12c61
As of [React 19](https://react.dev/blog/2024/12/05/react-19), context providers no longer require the `<MyContext.Provider>` syntax and can be rendered as `<MyContext>` directly. This will be deprecated in future versions of React, which is now being caught by the [`@eslint-react/no-context-provider`](https://eslint-react.xyz/docs/rules/no-context-provider) ESLint rule. Similarly, the [`use`](https://react.dev/reference/react/use) API is now preferred over `useContext` because it is more flexible, for example they can be called within loops and conditional statements. See the [`@eslint-react/no-use-context`](https://eslint-react.xyz/docs/rules/no-use-context) ESLint rule for more details.
31 lines
606 B
TypeScript
31 lines
606 B
TypeScript
'use client'
|
|
|
|
import React, { createContext, use, useState } from 'react'
|
|
|
|
type CustomContext = {
|
|
getCustom
|
|
setCustom
|
|
}
|
|
|
|
const Context = createContext({} as CustomContext)
|
|
|
|
export const CustomProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const [getCustom, setCustom] = useState({})
|
|
|
|
const value = {
|
|
getCustom,
|
|
setCustom,
|
|
}
|
|
|
|
return (
|
|
<Context value={value}>
|
|
<div className="custom-provider" style={{ display: 'none' }}>
|
|
This is a custom provider.
|
|
</div>
|
|
{children}
|
|
</Context>
|
|
)
|
|
}
|
|
|
|
export const useCustom = () => use(Context)
|