React front-end дизайн и разработка отзывы для некоторых важных пакетов «npm», которые будут играть очень полезную роль в вашей повседневной работе. Эти пакеты широко используются и сыграют большую роль в облегчении вашей работы.
A. Карусельный слайдер:
Конечно же, мы используем слайдеры на сайте. Для того чтобы охватить 90% сайтов, мы должны использовать слайдеры. Вот три слайдера.
- https://www.npmjs.com/package/react-slick (я лично использую его)
- https://www.npmjs.com/package/rc-slider
- https://www.npmjs.com/package/swiper
B. Marquee:
Во многих случаях нам требуется слайдер-шоу, которое будет продолжаться автоматически. Чаще всего мы используем этот дизайн Marquee, когда мы используем секцию логотипа. Если вы хотите, вы можете использовать React Fast Marquee этот пакет npm. Построен очень простой и очень привлекательный дизайн.
- https://www.npmjs.com/package/react-fast-marquee
C. Галерея изображений JavaScript и лайтбокс:
Нам может понадобиться показывать изображения в галерее очень часто. Мы даже видели много сайтов, где изображения галереи начинаются со всплывающих окон. Вы можете использовать этот пакет для показа точно таких же изображений галереи через всплывающие окна.
- https://www.npmjs.com/package/photoswipe
- https://www.npmjs.com/package/react-image-lightbox
D. Lazyload:
Послушав название, можно понять, что он делает. Это Lazyload. Когда содержимое сайта становится избыточным, сайт не успевает загружаться, и этот пакет Lazyload npm даст вам некоторые удивительные возможности. Это означает, что ваш скин будет загружаться столько, сколько вы захотите — вся страница никогда не загрузится. Вы будете прокручивать сайт, и он будет загружаться так же, как и прокручиваться. Благодаря этому клиенты смогут увидеть ваш контент еще до того, как ваша веб-страница будет завершена.
- https://www.npmjs.com/package/react-lazyload
E. Модальное видео:
Для создания сайта нам может понадобиться показать видео с youtube или самостоятельно сделанное видео, и мы видели на многих сайтах, что нажатие кнопки показывает видео с youtube во всплывающем окне, и оно будет продолжаться, если вы хотите. Вы можете использовать этот пакет для показа всплывающих окон видео YouTube таким же образом.
- https://www.npmjs.com/package/react-modal-video
- https://www.npmjs.com/package/react-player
F. Всплывающая подсказка:
Я навожу курсор мыши на элемент и вдруг вижу, что что-то появляется, да, это называется Tooltip. Если вы хотите, вы можете использовать этот пакет, чтобы использовать красивые Tooltip. Есть несколько типов дизайна, которые великолепны.
- https://www.npmjs.com/package/react-tooltip
- https://atomiks.github.io/tippyjs/
G. Recharts:
Обычно, когда мы создаем приборную панель или панель администратора, мы должны посмотреть на данные через график диаграммы и этот пакет npm имеет уникальную роль, чтобы показать данные через graphat Я лично использовал его довольно хорошо и дружественное поведение. В середине.
- https://recharts.org/en-US
H. Animate:
Без анимации веб-сайт никогда не будет на 100 процентов красивым. Привлекательность сайта создается видом анимации. Ниже я привел несколько пакетов npm для использования анимации, которые очень популярны и высококлассны.
- https://animate.style/
- http://michalsnik.github.io/aos/
- https://mojs.github.io/
- https://www.npmjs.com/package/react-reveal
- https://dbramwell.github.io/react-animate-on-scroll/
I. Тревога:
Услышав название, вы можете понять, каким оно может быть. Мы можем использовать его, когда нам нужен сигнал на сайте. Например, человек зашел на ваш сайт через контактную форму и отправил вам сообщение, теперь он отправил вам токен, чтобы узнать, была ли работа успешной, и эти пакеты npm очень полезны для отправки этого токена.
- https://www.npmjs.com/package/sweetalert2
- https://sweetalert.js.org/guides/
- https://www.npmjs.com/package/cogo-toast
- https://www.npmjs.com/package/ngx-toastr
- https://www.npmjs.com/package/react-toastify
- https://www.npmjs.com/package/notistack
J. Google-карты:
Нам часто приходится размещать карты на сайте, и мы видели много сайтов, на которых есть карты, чтобы клиент мог точно узнать местоположение. Вы можете легко установить Google Maps, используя этот пакет npm.
- https://www.npmjs.com/package/@react-google-maps/api
K. Меню:
Это позволяет создавать меню. Те, кому сложно создавать собственные меню, могут воспользоваться этим пакетом. Но я думаю, если вы не можете создавать собственные меню, вы можете использовать любой фреймворк, например Bootstrap, material-ui и т.д., и если вам нравится, вы также можете использовать этот пакет.
- https://www.npmjs.com/package/rc-menu
- https://www.npmjs.com/package/rc-drawer
L. Sticky Nav:
На многих сайтах положение Navbar фиксированное, но при небольшой прокрутке можно увидеть эффективный дизайн Navbar сверху вниз, и вы можете использовать этот пакет для этого.
- https://www.npmjs.com/package/react-js-stickynav
M. scroll-to-top:
Предположим, вы прокрутили сайт до нижнего колонтитула, но по какой-то причине вам нужно подняться на самый верх, что тогда делать? Обычно мы сворачиваем прокрутку и снова поднимаемся наверх, но вот пакет, который вы можете использовать. Если вы щелкните по иконке, вы можете перейти на главную страницу, то есть, если вы щелкните по иконке с Footer, вы можете перепрыгнуть на самый верх.
- https://www.npmjs.com/package/react-scroll-to-top
- https://www.npmjs.com/package/react-scroll-up
N. Perfect-scrollbar:
Одним из самых популярных пакетов является Perfect-scrollbar, который чаще всего используется в админ-панелях или приборных панелях. Он размещает данные на основе определенного объема и создает эффект прокрутки в пределах этого объема. Если мы разместим много данных на обычном сайте, то перпендикуляр этого сайта будет большим, поэтому с помощью этого пакета тысячи данных могут быть загружены в определенный раздел и отображены в этом разделе с помощью прокрутки.
- https://www.npmjs.com/package/perfect-scrollbar
O. React-ui-scrollspy:
Много раз мы показываем все элементы на одной странице, например, Главная, О сайте, Блог, Контакты, Портфолио и т.д. И как раз в том случае, если вам нужно прокрутить пункт меню и опцию раздела, активировав этот пакет, вы сможете сделать всю эту работу очень легко.
- https://www.npmjs.com/package/react-ui-scrollspy
P. React Icons:
Не важно, просто установите и пользуйтесь. Пользу этого пакета npm невозможно переоценить. Обычно нам приходится устанавливать иконки на сайте, и чтобы установить эту иконку, нам приходится ходить по разным сайтам и собирать толпы. Вы можете получить все иконки отсюда, используя этот пакет, если захотите. Здесь вы найдете иконки — Bootstrap Icons , BoxIcons Devicons, Feather Flat Color Icons, Font Awesome, Game Icons, Github Octicons icons, Grommet-Icons, Heroicons, IcoMoon Free, Ionicons 4, Ionicons 5, Material Design icons, Remix Icon, Simple Icons, Tabler Icons, Typicons, VS Code Icons, Weather Icons, css.gg
- https://react-icons.github.io/react-icons/ (я не могу без него).
Q. Спиннеры:
Мы должны размещать спиннеры при загрузке сайта. Вы можете использовать отличный спиннер, используя эти пакеты npm.
- https://www.npmjs.com/package/react-spinners
- https://www.npmjs.com/package/spinners-react
- https://www.npmjs.com/package/react-loader-spinner
R. React-code-input:
Много раз нам может понадобиться OTP (одноразовый пароль) с нашего мобильного номера. Если вам нужно создать сайт в такой ситуации, то вы можете использовать этот пакет npm. Он принимает вводимый код очень удобным способом.
- https://www.npmjs.com/package/react-code-input
S. React-currency-format:
Сайту электронной коммерции может понадобиться сортировать количество денег в каком-либо формате. И вы можете использовать этот пакет npm для сортировки количества денег.
- https://www.npmjs.com/package/react-currency-format
- https://nosir.github.io/cleave.js/
T. React-countup:
Это очень эффективно при создании конструкций, которые могут увеличиваться в определенное количество раз с течением времени. На большинстве сайтов мы видим, что такая-то компания выполнила работу и сколько членов у них в команде, а также начинается отсчет от нуля — это конкретика. Если вы хотите, вы можете создать его с помощью этого пакета.
- https://www.npmjs.com/package/react-countup
Подведение итогов
Надеюсь, вам понравилась статья, если да, то не забудьте нажать ❤️ и Подписаться. Вы также можете добавить ее в закладки для дальнейшего использования. Было интересно создавать эту статью, и если у вас есть какие-либо вопросы или предложения, не стесняйтесь, пишите их. До встречи.
Вы можете выразить свою поддержку, поставив мне звезды на GitHub Profile.😊👇
G i t h u b
P o r t f o l i o
Л и н к е д и н
Поддержать
Купи мне кофе
#мухаммадасиф #вебразработчик #бангладеш