IlyaDev

Привет друг! В предыдущей статье мы рассмотрели основы создания UI-кита с избирательным импортом компонентов. Однако, когда речь заходит о поддержке различных настроек TypeScript, таких как moduleResolution: "node", могут возникнуть проблемы с подключением вашей библиотеки в другие проекты без внесения изменений в их конфигурацию. Ошибка: TS2307: Cannot find module super-ui-kit/ Button or its corresponding type declarations. There are types at */super-ui-kit/dist/components/Button/index. d. ts , but this result could not be resolved under your current moduleResolution setting...

Привет друг! В этой статье попробуем реализовать компонент - индикатор загрузки для отправленного документа с клиента. Чего мы хотим добиться? тут 🥸. И так - поехали !🛼 Накидаем сходу немного стилей. И спрячем input type="file", отрисовав вместо него кнопку - 'Выбрать файл'. Подготовим состояние для сохранения файла. import {ChangeEvent, FC, useRef, useState} from 'react'; export const FileUpload = () => { const [selectedFile, setSelectedFile] = useState<File | null>(null); const inputRef...

Привет друг ! В этой статье попробуем реализовать универсальный компонент (обёртку), для реализации загрузки новых данных при достижении конца списка пользователем 🧐. За достижением оного обратимся за помощью к браузерному API - Intersection Observer. Чего мы хотим добиться? тут 🥸. И так - поехали !🛼 В родительском компоненте, для нашего будущего InfiniteScrollWrapper.tsx - тот самый универсальный компонент пишем: // моковый массив const MOCK_DATA = Array.from({ length: 100 }, (_, i) => `Item...

Привет друг ! В этой статье попробуем создать эффект падающих снежинок поверх веб-контента, используя React и HTML5 Canvas. Этот эффект добавит праздничное настроение твоему сайту или приложению 🎅. С моими любыми комментариями в коде 🤭. Чего мы хотим добиться? тут 🥸. И так - поехали !🛼 Создаём компоненту CircleCanvas.tsx и добавим в него следующий код: interface Circle { x: number; y: number; radius: number; speedY: number; speedX: number; offsetX: number; } export type Nullable<T> = T | null; Этот интерфейс описывает параметры одной снежинки...

Привет друг! В этой статье попробую описать, один из вариантов создания ui-kit для react, с возможностью избирательного импорта компонент. Если вдруг установил в проект uikit, а там ошибка: TS2307: Cannot find module super-ui-kit/ Button or its corresponding type declarations. There are types at */super-ui-kit/dist/components/Button/index. d. ts , but this result could not be resolved under your current moduleResolution setting. Consider updating to node16, nodenext, or bundler Тебе сюда 🥸. Мотивация:...