Provider and Consumer

The Provider component supplies the context value to its children. Components that need this value can consume it using the useContext hook or the older Consumer pattern.

const ThemeContext = createContext('light');

function App() {
  return (
    
      
    
  );
}

function Toolbar() {
  return (
    
      {theme => 
Current theme: {theme}
}
    
  );
}

Use Provider at a higher level and access the context with Consumer or useContext in nested components.