/ Новости и уроки / Библиотеки React , о которых вы должны знать

Библиотеки React , о которых вы должны знать

1918
Библиотеки React , о которых вы должны знать
За последние несколько лет React становится все более популярным. Вместе с этим выпускается все больше библиотек для React, приносящих нам большие новых возможностей, но, что самое главное, облегчающие написание кода.

В этой статье я вам покажу пять библиотек, которые вы должны знать.

1. react-portal

Я думаю, что порталы в React знакомы большинству людей, даже если они редко используются.

Обычно все наше приложение React отрисовывается в одном DOM-узле в HTML. Но с помощью порталов мы можем определять дополнительные узлы.

Пример:


import { Portal } from ‘react-portal’
<Portal node={document && document.getElementById(‘portal’)}>
  <p>This is portaled into the portal div!</p>
</Portal>

Просто настройте контейнер портала в своем HTML-коде с помощью типичных селекторов JavaScript, таких как getElementById, и все готово.

Файл public/index.html вашего React приложения:


<div id=”root”></div>

<div id=”portal”></div>

Как видите, корневой элемент, необходимый каждому React-приложению, находится там, где обычно, а порталы, которые вы можете создать с помощью этой классной библиотеки, конечно же, могут находиться за пределами корня.

Дальнейший совет: Вы можете показывать или не показывать ваш портал, потому что в конце концов это просто компонент React:


{this.state.show ? (
  <Portal node={document && document.getElementById(‘portal’)}>   
    <p>Portal content</p>
  </Portal>
) : null}

2. react-toastify

Предоставление динамической информации конечному пользователю на сайте является абсолютно необходимым в современной веб-разработке. К сожалению, функция alert() в JavaScript не является хорошим выбором для этой цели, и я думаю, что это абсолютно понятно всем.

Здесь приходит react-toastify - небольшая, но очень настраиваемая библиотека для вывода практичных и красивых сообщений в браузере.

Вот как использовать эту библиотеку в вашем React проекте:


import { ToastContainer, toast } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
toast.configure({
  autoClose: 2000,
  draggable: false,
  position: toast.POSITION.TOP_LEFT
})
const notify = () => toast('Wow so easy !')

const App = () => (
  <div className="App">
    <button onClick={notify}>Notify !</button>
  </div>
)

3. react-contextmenu

Трудно представить себе реальное программное обеспечение без контекстных меню, но на сайтах это довольно необычно. Ну, уже не из-за того, что все больше и больше веб-приложений приближаются к реальным настольным приложениям, которые часто уже предлагают такую же хорошую производительность и многие функции, которые вы бы никогда не ожидали много лет назад.

Одной из таких функций является открытие меню правой кнопки мыши, которая все больше и больше используется на веб-сайтах.

В основном для отображения так называемого контекстного меню существует очень удобная библиотека React.js, которую я вам сейчас покажу.

Пример:


import React from 'react'
import { ContextMenu, MenuItem, ContextMenuTrigger } from 'react-contextmenu'

const App = () => (
	<React.Fragment>
		<ContextMenuTrigger id="TriggerID"> {/* ID for every instance must be individual */} 
			<p>Right click on me!</p>
		</ContextMenuTrigger>

		<ContextMenu id="MenuID">
			<MenuItem onClick={() => alert('first ')}>
				<button>1. Item</button>
			</MenuItem>

			<MenuItem onClick={() => alert('second')}>
				<button>2. Item</button>
			</MenuItem>
		</ContextMenu>
	</React.Fragment>
)

export default App

<ContextMenuTrigger> будет тем компонентом, который нам нужен будет, чтобы при клике правой кнопкой мыши переключалось меню. Само меню определяется внутри обертки <ContextMenu>. Для каждого элемента есть компонент <MenuItem>, которому мы можем дать событие onClick для обработки пользовательского ввода.

4. react-lazy-load-image-component

Показ множества фотографий на нашем сайте может занять некоторое время. Часто готовые и внезапно появляющиеся фотографии вызывают у пользователя неприятные ощущения от работы с приложением, которых мы, конечно же, хотим избежать.

Отличной библиотекой для оптимизации изображений, является react-lazy-load-image-component. Мы можем не только создавать приятные эффекты размытия, но мы также можем медленно загружать изображения (т.е. позволять им загружаться на сайт только тогда, когда это необходимо).

Вот пример с эффектом размытия во время загрузки изображений:


import React from 'react'
import { LazyLoadImage } from 'react-lazy-load-image-component'
import 'react-lazy-load-image-component/src/effects/blur.css'

const App = () => (
	<React.Fragment>
		<LazyLoadImage
			alt={'this is the alt'}
			width={'900px'}
			effect="blur"
			src={'https://<link>//'} 
		/>
	</React.Fragment>)

export default App

5. react-onclickoutside

Важным правилом ui дизайна является оценка как можно большего количества записей пользователя. Это должно быть понятно всем, и все же иногда бывает сложно реализовать что-то подобное в виде кода.

Примером может служить меню, которое было свернуто пользователем. Если вы захотите закрыть его снова, 90% пользователей, как правило, просто нажимают на "мертвые" области сайта (т.е. на элементы, которые сами по себе не будут реагировать).

Одной из такой библиотек, является react-onclickoutside (реакция на клики), которая позволяет нам обрабатывать события кликов вне нашего фактического элемента.

В следующем примере вы можете увидеть, как мы можем реализовать это h1 и кнопки. Только когда вы нажмете на что-нибудь, кроме этих двух элементов, будет выведено сообщение в console.log.


import React, { Component } from 'react'
import onClickOutside from 'react-onclickoutside'

class App extends Component {
	handleClickOutside = evt => {
		console.log('You clicked outside!')
	}

	render() {
		return (
			<div>
				<h1>Click outside!</h1>
				<button>Don't click me!</button>
			</div>
		)
	}
}

export default onClickOutside(App)

Заключение

Надеюсь это статья будет полезна для вас. Не забывайте подписываться на наши соц. сети!