Swapy: Простий Drag-and-Drop для вашого проекту. Огляд бібліотеки! Swapy + NextJS.
HTML-код
- Опубликовано: 15 янв 2025
- У цьому відео ми розглянемо бібліотеку Swapy, яка дозволяє легко додати функціонал drag-and-drop до ваших проєктів. Я покажу вам інтеграцію цієї бібліотеки з Next.js та серверними компонентами, щоб ви могли швидко налаштувати та використовувати її у своєму коді. Ви дізнаєтеся про ключові переваги Swapy, як вона спрощує розробку інтерактивних інтерфейсів, і як за допомогою Next.js забезпечити ефективне виконання. Ідеальне рішення для тих, хто шукає потужний та простий drag-and-drop!
Курс по якості коду зі знижкою - www.rudnyi.dev...
Безкоштовний курс по React - www.rudnyi.dev...
Стати спонсором каналу:
/ @maksymrudnyi
Буду вдячний за підтримку каналу:
Patreon - / rudnyi
BuyMeACoffee - www.buymeacoff...
Mono Bank - send.monobank....
або так - 5375 4114 0505 7287
Приват банк - 4627 0551 1331 6110
Давайте дружити:
Telegram ↣ t.me/maksymrudnyi
Telegram чат ↣ t.me/joinchat/...
INSTAGRAM ↣ / maksym_rudnyi
TWITTER ↣ / maksymrudnyi
FACEBOOK ↣ / travelscode
WEB-SITE ↣ travelscode.com/
GITHUB ↣ github.com/Mak...
Другий RUclips канал ↣ / travelscode
#react #nextjs #swapy #dnd
Дякую за відео) Дуже цікаво знаходити щось нове, що полегшує життя)
Цілком погоджуюсь. Сам шукаю собі цікаві та зручні інструменти.
Дякую. Маю через тиждень робити адмінку із функцією зміни порядку сутностей.
Спробую дану бібліотеку
Буду радий почути фідбек і досвід використання. На скільки вона зручна буде і в інших проєктах.
@@MaksymRudnyi переваги - швидко, є події в яких зручно писати код, в події маємо data і всередині масив, з яким зручно було обробити мій кейс
недоліки - треба писати запобіжник, падав додаток, коли дані були undefined, хоча масив мапав через ?. Тому в use Effect перевіряю свої дані з RTK хука, а лише потім створю swapy екземпляр
баги із вкладеними drag and drop, якщо треба зробити їх на різних вкладеностях. Зовнішній контейнер захоплює дата атрибути сутностей, вкладених всередині в інший контейнер
Увесь компонент, який повертається, повинен мати key, це важливо, коли дані оновились на сервері. Refetch RTK query без даного key не відображав правильний порядок оновлених сутностей.
Даний ключ має бути унікальним після refetch та бути на найвищому рівні, не обов'язково на драг контейнері. У мене це сума всіх id сутностей підряд. Підходить також бібліотека uuid, але вона обриває анімацію, бо міняється на кожному ререндері, а не коли дані змінились. В теорії можна мемоїзувати результат uuid v4 та змінювати, коли оновились дані. Мабуть так і перепишу
Також довелось на сервері написати запобіжник, бо після resize були баги, які дублювали сутність і видаляли потрібну. Тому на сервері роблю перевірки, щоб кожна сутність зі старого масиву була в новому і однакова довжина.
Баги були виключно в режимі розробника, при звичайному користуванню, як юзер, не помічав
Дякую!
Будь ласка.
Проект Github не найден
а для чого писати самостійно імпорти, якщо IDE нормально справляється з їх додаванням?
Питання звички лише, але погоджуюсь, треба автоматизовувати.
змініть Ui ide на новий, цей ж минуле століття
Old school )).
Оновлю скоро, ліцензія на днях закінчується, треба купити.