Ответ
Да, создавал. Например, разрабатывал кастомный селект с виртуальным скроллом для больших списков (10k+ элементов). Использовал React, TypeScript и библиотеку react-window для оптимизации рендеринга.
Пример:
import { FixedSizeList as List } from 'react-window';
const VirtualSelect = ({ options }) => {
const Row = ({ index, style }) => (
<div style={style}>{options[index].label}</div>
);
return (
<List
height={300}
itemCount={options.length}
itemSize={35}
width={300}
>
{Row}
</List>
);
};Также реализовывал:
- Drag-and-drop таблицы с сортировкой и кастомными ячейками.
- Модальные окна с управлением через Context API.
- Динамические формы с валидацией (Formik + Yup).
Учитывал доступность (a11y), производительность и переиспользуемость.
Ответ 18+ 🔞
А, ну да, создавал, блядь! Ну как же, ёпта, без этого никуда. Вот, например, был случай — нужно было запилить кастомный селект, но такой, чтобы не сдох, когда в него суёшь список размером с телефонную книгу Москвы, тысяч так десять пунктов. Обычный селект браузера просто бы взвыл и лёг, а мне надо, чтобы всё летало.
Взял React, TypeScript, чтобы не выстрелить себе в ногу, и библиотечку react-window — она как раз для таких цирков, рендерит только то, что видно, а не всю хуйню сразу. Гениально же, да?
Вот, смотри, кусочек кода, как я это делал:
import { FixedSizeList as List } from 'react-window';
const VirtualSelect = ({ options }) => {
const Row = ({ index, style }) => (
<div style={style}>{options[index].label}</div>
);
return (
<List
height={300}
itemCount={options.length}
itemSize={35}
width={300}
>
{Row}
</List>
);
};Выглядит просто, а пиздец как эффективно работает. Пользователь скроллит, а под капотом только нужные элементы рендерятся. Магия, сука!
А ещё были, например, таблицы с перетаскиванием строк — drag-and-drop, блядь, чтобы их можно было мышкой таскать, как мешки с картошкой, и сразу сортировались. С кастомными ячейками, где можно было чё угодно впихнуть: иконки, прогресс-бары, хуй в пальто.
Модалки делал, которые через один общий Context управляются, чтобы не плодить эту дичь в каждом компоненте. Нажал кнопку — окно вылезло, нажал на крестик или на затемнение — схлопнулось. Красота!
Ну и, само собой, формы динамические, где поля могут добавляться, удаляться, валидация на лету. Использовал Formik с Yup — связка просто охуенная, вся логика состояния и проверок не в коде раскидана, а аккуратно описана.
И во всём этом, понимаешь, главное было не только чтобы работало, но и чтобы доступно было для скринридеров, производительно, и чтобы потом другой разработчик, глядя на этот код, не матерился, а мог переиспользовать куски. А то иногда такое напишешь — сам через месяц разбираться боишься, волнение ебать!