react haiku
v2.1.8
Haiku는 저축을 목표로 간단하고 가벼운 반응 라이브러리입니다.
당신은
작업을 더 빠르고 효율적으로 수행하도록 도와주세요!
Haiku를 설치하는 것은 매우 쉽습니다!
반응이 필요합니다.> = 16.8.0
npm install react-haikuyarn add react-haikupnpm install react-haiku이 프로젝트는 JEST를 테스트 프레임 워크 및 RTL (React Testing Library)으로 사용합니다.
적용 범위를 활성화하여 모든 단위 테스트를 실행합니다
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 ; Haiku는 항상 개선 및 기부금에 개방적이며 기여하려면 열린 문제를 확인할 수 있으며 기능 요청 템플릿을 사용하여 자신의 개선/아이디어를 추가하도록 요청할 수도 있습니다. 기고하기 전에 기여 가이드를 읽고 표준을 존중하십시오! 시간 내 주셔서 감사합니다!
useClipboard() - 데이터를 사용자의 클립 보드에 복사하십시오!useHover() - 마우스가 요소를 넘어서는 경우 빠르게 감지하는 방법!useInputValue() -이 간단한 후크로 입력 상태를 관리하십시오!useLeaveDetection() - 사용자의 커서가 페이지를 떠날 때 감지하십시오!useMediaQuery() - 미디어 쿼리를 사용하여 구성 요소를 조작하십시오!useMousePosition() - 대상 또는 전체 문서에 대한 마우스의 현재 위치를 감지하십시오!usePrefersTheme() - 사용자가 선호하는 시스템 테마를 감지하십시오!useScript() - 구성 요소에서 문서에 스크립트 태그를 첨부하십시오!useToggle() - 두 가지 옵션 사이의 상태 값을 전환합니다!useBoolToggle() - 토글 부울 상태 값!useUrgentUpdate() -이 후크를 호출 할 때 성분을 렌더링하십시오!useClickOutside() - 대상 요소 외부의 클릭 감지!useConfirmExit() - 상태가 더러워진 경우 탭을 닫기 전에 사용자에게 메시지를 메시지로 프롬프트합니다.useDebounce() - 지연 후 상태가 업데이트에 반응하도록 대변이 변경됩니다!useEventListener() - 창 객체 또는 특정 대상 요소에서 이벤트 리스너를 설정하십시오!useFavicon() - 구성 요소에서 웹 사이트의 Favicon을 동적으로 업데이트하십시오!useFirstRender() - 구성 요소가 첫 번째 렌더링에 있는지 확인하십시오!useHold() - 대상 요소의 긴 프레스를 처리하고 설정 지연 후 핸들러를 실행하십시오!useIdle() - 이벤트를 기반으로 페이지에서 사용자 활동/비활성을 감지하십시오!useIsomorphicLayoutEffect() - 실행 환경 (SSR vs 브라우저)에 따라 useeffect와 uselayouteffect 사이의 스위치!useLocalStorage() - LocalStorage 값을 동적으로 관리합니다useScrollPosition()useSingleEffect() - 구성 요소가 장착 된 경우에만 useeffect 후크를 엄격하게 실행하십시오!useTitle() - 구성 요소에서 문서 제목을 업데이트하십시오!useUpdateEffect() - useEffect와 유사하지만 구성 요소의 첫 번째 렌더링을 건너 며 종속성 값에 의해 트리거 된 업데이트에만 반응합니다.If 간단한 조건부 렌더링을위한 구성 요소!Show - 복잡한 조건부 렌더링을위한 구성 요소!For - 자동 키 할당이있는 동적 렌더링 구성 요소!RenderAfter 설정 지연 후 어린이를 렌더링하는 구성 요소.Image - 이미지 렌더링 프로세스를 단순화하는 구성 요소. 데이비드 하스
MIT
