useAdaptivityConditionalRender

Когда использовать?

Используйте когда нужно показать или скрыть элемент интерфейса по тому или иному брейкпоинту.

Особенности работы

Если вы переопределили адаптивность через AdaptivityProvider, то значение у каждого отдельного параметра адаптивности может быть двух типов:

• false – мы строго задали какой-то из параметров адаптивности. Например, при <AdaptivityProvider viewWidth={ViewWidth.MOBILE}> значение viewWidth.tabletPlus будет false, т.к. мы говорим, что у нас всегда мобильный вид.

• { className: string } – в CSS-класс, который на основе CSS Media Query будет переключать видимость вашего элемента через display: none.

Пример использования

Показываем левую колонку SplitLayout только на настольных экранах.

import {
  SplitLayout,
  SplitCol,
  PanelHeader,
  useAdaptivityConditionalRender,
} from '@vkontakte/vkui';
 
export function App() {
  const { viewWidth } = useAdaptivityConditionalRender();
 
  return (
    <SplitLayout header={<PanelHeader delimiter="none" />}>
      {viewWidth.tabletPlus && (
        <SplitCol fixed width={280} maxWidth={280} className={viewWidth.tabletPlus.className}>
          {/* ... */}
        </SplitCol>
      )}
      <SplitCol maxWidth="560px" stretchedOnMobile autoSpaced>
        {/* ... */}
      </SplitCol>
    </SplitLayout>
  );
}