El contexto es una forma de pasar datos a través de la jerarquía de componentes sin tener que pasar props manualmente en cada nivel.
Para crear un contexto en React usamos el hook createContext
:
import { createContext } from 'react'
const ThemeContext = createContext()
Para usar el contexto, debemos envolver el árbol de componentes con el componente Provider
:
<ThemeContext.Provider value="dark">
<App />
</ThemeContext.Provider>
Para consumir el contexto, debemos usar el hook useContext
:
import { useContext } from 'react'
function Button() {
const theme = useContext(ThemeContext)
return <button className={theme}>Haz clic aquí</button>
}