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 Тебе сюда 🥸. Мотивация:...

Привет друг ! В этой статье попробуем разобраться каким образом мы можем создать элемент, который будет показывать прогресс (скролл) прочтения станицы 🤔. И так - поехали !🛼 export const App = () => { return ( <div> <p>bla-bla</p> </div> ) }; Не гоже в ручную копипастить тег <p>, доверимся всецело JS. const paragraphs = Array.from({ length: 50 }, (_, index) => ( <p key={index}>bla - bla {index + 1}</p> )); В разметке добавим еще один div (в будущем наша полосочка), над переменной paragraphs...

Привет друг ! В этой статье попробуем разобраться как сделать плавное заполнение background, как триггер для этого будет использоваться input. Минута саморекламы😇: Хочешь порядка в коде, тебе сюда https://dzen.ru/a/Z1iL1J62BiwFEYgd. Мотивация: При заполнении инпута, на ввод пароля (например), было бы не плохо как то развлечь пользователя, один из вариантов опишу ниже! Ну а теперь, поехали!🛼 import {ChangeEvent, useState} from "react"; import s from './App.module.css'; export const App = () => { return ( <div className={s...

Привет друг! В этой статье попробую описать, один из вариантов автоматического скролла к последнему, приходящему сообщению в чате. В React приложении. Минута саморекламы😇: Хочешь порядка в коде, тебе сюда https://dzen.ru/a/Z1iL1J62BiwFEYgd. Ну а теперь, поехали!🛼 Как болванку буду использовать собранный проект при помощи vite: import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' function App() { const [count, setCount] = useState(0) return ( <> <div> <a href="https://vite...

Привет друг ! В этой статье попробуем разобраться каким образом мы можем оптимизировать наше приложение 🤔. Но не везде и всюду 😇, а хотя бы уменьшить размер .svg файлов. Мотивация: Логика крайне проста, чем меньше весят твои .svg файлы, тем легче будет клиенту загружать твой божественный проект. Мы конечно можем, по заветам наших дедов, каждую .svg-шку сжимать, на каком нибудь сервисе, жмякнув в поисковике "сжать svg". Но мы с тобой, крутые ребята 🧸, и попробуем автоматизировать данный процесс...

Привет друг ! В этой статье попробуем разобраться как сделать скриншот DOM дерева в React приложении. Минута саморекламы😇: Хочешь порядка в коде, тебе сюда https://dzen.ru/a/Z1iL1J62BiwFEYgd. Ну а теперь, поехали!🛼 Как болванку буду использовать собранный проект при помощи vite: import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' function App() { const [count, setCount] = useState(0) return ( <> <div> <a href="https://vite...

Привет друг! В этой статье попробую описать, пошаговое создание пакета npm для размещёния в нём конфигурации StyleLint. Хочешь видеть единообразие в написанном JS посмотри статью https://dzen.ru/a/Z1iL1J62BiwFEYgd. Там ты увидишь много общего🫢 и это не страшно. Это не лень - это забота о тебе😇. Мотивация: Желание видеть единообразие в кодовой базе - это просто восхитительно! Есть много способов добиться стандартизации написания кодовой базы, сегодня пробуем рассмотреть создание npm пакета, для того, что бы одной зависимостью в нашем package...

Привет друг! В этой статье попробую описать, пошаговое создание пакета npm для размещёния в нём конфигурации ESLint. Хочешь видеть единообразие в написанном CSS посмотри статью https://dzen.ru/a/Z1mIr9iQ3kxhk-AI. Там ты увидишь много общего🫢 и это не страшно. Это не лень - это забота о тебе😇. Мотивация: Желание видеть единообразие в кодовой базе - это нормально! При создании проекта создаём eslint.config.js закидываем туда, понравившиеся/обговорённые конфигурации. На следующем проекте делаем...