Фичи

Привет друг! В этой статье попробуем реализовать компонент - индикатор загрузки для отправленного документа с клиента. Чего мы хотим добиться? тут 🥸. И так - поехали !🛼 Накидаем сходу немного стилей. И спрячем 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; Этот интерфейс описывает параметры одной снежинки...

Привет друг ! В этой статье попробуем разобраться каким образом мы можем создать элемент, который будет показывать прогресс (скролл) прочтения станицы 🤔. И так - поехали !🛼 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...