Баннер

1) Заходишь в свой компонент, который рисует баннер. В него вероятно прилетает 2 ссылки на картинки и он рендерит div с текстом.

2) div с текстом делаешь обычным блоком, внутри p например. В p текст произвольного размера. div будет по высоте равен содержимому.

3) Инсталлим библиотеку:

npm install react-sizes

4) Импортируем её в компоненте с баннером:

import withSizes from 'react-sizes'

5) Узнаём какая ширина экрана считается десктопом в твоём проекте.

Предположим что 992px (это маленький ноутбучек).

6) Пишешь функцию, которая принимает width и возвращает объект с новыми пропсами для компонента. Эта функция будет использоваться библиотечкой. Библиотечка прокинет тебе ширину и высоту в неё.

function mapSizesToProps({ width }) {

 return {

  isDesktop: width >= 992,

 }

}

7) Оборачиваем компонент примерно как connect:

export default withSizes(mapSizesToProps)(MyComponent)

Если там уже есть connect, то можно этот "паровозик" продолжать до бесконечности оборачивая.

8) Теперь тебе в компонент будет прилетать новый пропс isDesktop.

Ты можешь в зависимости от значения подставить в div в атрибут style значение background-image:

<div style={{backgroundImage: `url(${тут-ссылка})`}}> </div>