Ответы пользователя по тегу React
  • Как поменять limit для API при определенных брейкпоинтах по длине экрана?

    DaryyyaS21
    @DaryyyaS21
    Наставник - SaintCode Bootcamp
    Добрый день. Вам нужно знать ширину экрана, получить её можно так: window.innerWidth
    Дальше можно сравнить это значение с желаемым и получить boolean значение.
    Чтобы следить за изменением ширины экрана, есть такое решение:

    /**
     * @example:
     * const [width, setWidth] = useState(window.innerWidth);
     * useWindowResize(setWidth);
     * */
    export function useWindowResize(
      callback: (width: number) => void,
      deps: DependencyList = [],
    ): void {
      const makeThrottledAction = throttle(
        () => callback(window.innerWidth),
        150,
      );
    
      useEffect(() => {
        window.addEventListener('resize', makeThrottledAction, { passive: true });
        return () => {
          window.removeEventListener('resize', makeThrottledAction);
        };
      }, [...deps]);
    }


    Заметьте, я использовала функцию throttle из lodash, так как слушатель resize вызывается очень часто и может привести к проблемам с производительностью. Также, если вы не используете TS, просто удалите типы из примера.
    Удачи!
    Ответ написан
    Комментировать