У фронтенд-розробці дуже часто виникає потреба в горизонтальному слайдері, чи то для зображень, карток, інформації про статті на розпродажу тощо. Перше, що спадає на думку — це знайти готове рішення, не "винаходити велосипед" і скоротити час на розробку. Бібліотеки пропонують нам широкий вибір інструментів, які можуть полегшити нашу роботу, але з мого особистого досвіду жодне з них не є доступним, коли йдеться про модифікацію дуже специфічних характеристик, як у випадку з дизайном.
У цьому блозі я поділюсь своїм досвідом розробки власного горизонтального слайдера з використанням хуків React та тим, як це дало мені повний контроль над дизайном і поведінкою компонента.
Основними викликами, з якими я зіткнувся при реалізації слайдера, були: обробка подій прокручування, адаптивна поведінка та події дотику на мобільних пристроях.
Чому власні хуки стали ідеальним рішенням для моєї реалізації?
Власні хуки — це спосіб винесення та повторного використання логіки в функціональних компонентах у React. Створивши власний хук, ви можете інкапсулювати складну логіку та використовувати її в різних компонентах вашого застосунку. У моєму випадку я зрозумів, що реалізація власного хука для горизонтального слайдера була хорошою ідеєю, оскільки це дозволило відокремити логіку слайдера від логіки рендерингу компонента, що зробило його легшим для управління та підтримки.
Крім того, це значно спростило повторне використання логіки слайдера в інших частинах застосунку, якщо це буде необхідно.
Хук повертає об'єкт з властивостями, які дозволяють контролювати слайдер: ref для елемента слайдера, функцію scrollTo для прокручування слайдера вліво чи вправо, змінну scrollStatus, яка представляє поточну позицію прокрутки слайдера, та isOverflown — функцію, що вказує, чи виходить контент слайдера за межі контейнера. У моєму випадку це використовувалось для приховування або відображення стрілок слайдера, коли на списку недостатньо елементів для виконання дії прокручування.
Використання
У нашому прикладі ми будуємо застосунок, який показує інформацію про властивості та діяльність, якою можна займатися під час перебування. Ми створимо компонент `` , який спроектовано таким чином, щоб він був повторно використовуваним в усьому застосунку, зберігаючи при цьому послідовну структуру дизайну.
Компонент зможе отримувати різні типи дочірніх компонентів, такі як діяльність, якою можна займатися, фотографії властивостей для перебування і так далі.
Як ви можете побачити в цьому фрагменті коду, компоненти передаються як діти до, який обробляє макет та прокручування елементів, забезпечуючи послідовність в дизайні та поведінці.
Якщо вам сподобалося те, що ви бачите, і ви хочете спробувати, ви можете встановити наш npm пакет або переглянути його на GitHub. Внесок вітається!
Перекладено з: Dynamic horizontal slider using React and custom hooks