react haiku
v2.1.8
Хайку - это простая и легкая библиотека React с целью сохранения
Время, предлагая большую коллекцию крючков и утилит, которые будут
Помогите вам выполнить работу быстрее и эффективнее!
Установить хайку очень просто!
Требуется реагировать> = 16,8.0
npm install react-haikuyarn add react-haikupnpm install react-haikuЭтот проект использует Jest в качестве структуры тестирования и библиотеки реагирования тестирования (RTL) для тестирования компонентов и крючков React.
Чтобы выполнить все модульные тесты с включенным покрытием
npm run test Пожалуйста, проверьте официальную документацию для получения полного использования.
import { useHover } from 'react-haiku' ;
const Component = ( ) => {
const { hovered , ref } = useHover ( ) ;
return < p ref = { ref } > { hovered ? 'All mice on me' : 'No mice on me' } </ p > ;
} ;
export default Component ; import { For } from 'react-haiku' ;
const Component = ( ) => {
const list = [ { name : 'React' } , { name : 'Haiku' } ] ;
render (
< >
< For each = { list } render = { ( item , index ) => < p > { item . name } </ p > } />
</ > ,
) ;
} ;
export default Component ; Хайку всегда открыт для улучшений и вкладов, вы можете проверить открытые проблемы, если вы хотите внести свой вклад, а также можно попросить добавить свои собственные улучшения/идеи, используя шаблон запроса функции. Прежде чем внести свой вклад, пожалуйста, прочитайте руководство по взносу и убедитесь, что уважайте стандарты! Спасибо за ваше время!
useClipboard() - Скопируйте данные в буфер обмена пользователя!useHover() - Быстрый способ обнаружить, если ваша мышь превышает элемент!useInputValue() - Управляйте состоянием ввода с помощью этого простого крючка!useLeaveDetection() - Обнаружение, когда курсор вашего пользователя покидает страницу!useMediaQuery() - манипулируйте своим компонентом, используя медиа -запросы!useMousePosition() - Обнаруйте текущую позицию мыши относительно цели или всего документа!usePrefersTheme() - Обнаруйте тема предпочтительной системы пользователя!useScript() - Прикрепите теги скрипта к документу из ваших компонентов!useToggle() - Значения состояния переключения между двумя разными параметрами!useBoolToggle() - Переключайте логические значения состояния!useUrgentUpdate() - Force Render Component При вызове этого крючка!useClickOutside() - Обнаружение кликов вне целевого элемента!useConfirmExit() - предложите пользователю сообщение перед закрытием вкладки, если состояние установлено как грязное.useDebounce() - Дебайт изменения состояния, чтобы отреагировать на обновления после задержки!useEventListener() - Установите слушатели событий на объекте Window или конкретный целевой элемент!useFavicon() - Динамически обновить Favicon Веб -сайта из компонента!useFirstRender() - Проверьте, находится ли компонент на первом рендеринге!useHold() - Обработайте длинные нажатия на целевой элемент и выполните обработчик после установленной задержки!useIdle() - Обнаружение активности пользователя/бездействия на странице на основе событий!useIsomorphicLayoutEffect() - переключение между использованием и uselayouteffect в зависимости от среды выполнения (SSR против браузера)!useLocalStorage() - динамически управлять значениями локальной организацииuseScrollPosition() - Доступ к текущей позиции прокрутки на странице и изменяет ее программа.useSingleEffect() - запустите крюк использования.useTitle() - Обновите заголовок документа из ваших компонентов!useUpdateEffect() - аналогично использованию, но он пропускает первое рендеринг компонента и реагирует только на обновления, запускаемые значениями зависимости.If - компонент для простого условного рендеринга!Show - компонент для сложного условного рендеринга!For - компонент динамического рендеринга с автоматическим назначением ключей!RenderAfter - компонент, который делает своих детей после установленной задержки.Image - компонент, который упрощает процесс рендеринга изображений. Дэвид Хаз
Грань
