React Context API simple example

react-context-api-example.md

React Context API

Для создания контекста нужно

• Создать контекст при помощи React.createContext()
• Передать данные (Provider)
• Получить данные (Comsumer)

Демо: codesandbox

Подробнее

У нас есть приложение. Где-то в настройках юзер может задавать цветовую тему.
Нужно чтобы любой компонент в приложении мог получить это значение. Если компонентов много, то пробрасывать пропсы через все компоненты от родительского к дочерним слишком монструозно (да и переиспользование будет хромать при этом).

Выход - Context API. Создаем контекст с этими настройками пользователя. Прокидываем с использованием Provider'а нужное значение. При помощи Consumer'а забираем это значение.

const UserThemeContext = React.createContext({
  theme: "aqua"
});

Пусть в приложении есть ToolBar, который содержит ряд компонентов. Мы хотим, чтобы один из компонентов ToolBar'а Button получил доступ к теме пользователя. Оборачиваем Toolbar с помощью UserThemeContext.Provider:

<UserThemeContext.Provider value={{ theme: "red" }}>
        <ToolBar />
      </UserThemeContext.Provider>
    </div>

А в компоненте Button получаем значение через UserThemeContext.Consumer:

const Button = () => (
  <UserThemeContext.Consumer>
    {({ theme }) => {
      return <button style={{ backgroundColor: theme }}>Button</button>;
    }}
  </UserThemeContext.Consumer>
);