유연하고 접근하기 쉬운 펼치기/접기 만들기를 위한 React Custom-hook

블로그

유연하고 접근하기 쉬운 펼치기/접기 만들기를 위한 React Custom-hook

반응 접기(useCollapse)

React에서 접근 가능한 확장/축소 구성 요소를 만들기 위한 사용자 정의 후크입니다. |_+_|에서 CSS 전환을 사용하여 높이에 애니메이션 효과를 줍니다. |_+_|로.

특징

  • 요소의 애니메이션 높이를 처리합니다. |_+_| 포함!
  • 당신은 UI를 제어합니다 - |_+_| 필요한 소품을 제공하고 스타일과 요소를 제어합니다.
  • 즉시 액세스 가능 - 축소/확장 구성 요소에 액세스할 수 있는지 걱정할 필요가 없습니다.
  • 애니메이션 프레임워크가 필요하지 않습니다! CSS 애니메이션으로 간단하게 구동
  • TypeScript로 작성

데모

데모 사이트를 참조하십시오!

코드샌드박스 데모

설치

0

용법

간단한 사용법

auto

직접 제어

auto

useCollapse

|_+_| 구성

다음은 |__+_|에 전달된 선택적 속성입니다.

소품 유형 기본 설명
isExpanded 부울 $ yarn add react-collapsed # or $ npm i react-collapsed true이면 축소가 확장됩니다.
기본 확장 부울 import React from 'react'; import useCollapse from 'react-collapsed'; function Demo() { const { getCollapseProps, getToggleProps, isExpanded } = useCollapse(); return ( {isExpanded ? 'Collapse' : 'Expand'} Collapsed content ); } true이면 마운트 시 축소가 확장됩니다.
확장 스타일 물체 import React, { useState } from 'react'; import useCollapse from 'react-collapsed'; function Demo() { const [isExpanded, setExpanded] = useState(false); const { getCollapseProps, getToggleProps } = useCollapse({ isExpanded }); return ( setExpanded((prevExpanded) => !prevExpanded), })} > {isExpanded ? 'Collapse' : 'Expand'} Collapsed content ); } 축소 패널이 확장될 때 적용되는 스타일 개체
붕괴 스타일 물체 const { getCollapseProps, getToggleProps, isExpanded, setExpanded, } = useCollapse({ isExpanded: boolean, defaultExpanded: boolean, expandStyles: {}, collapseStyles: {}, collapsedHeight: 0, easing: string, duration: number, onCollapseStart: func, onCollapseEnd: func, onExpandStart: func, onExpandEnd: func, }); 접을 때 접기 패널에 적용된 스타일 개체
접힌 높이 숫자 useCollapse 접었을 때의 콘텐츠 높이
완화 useCollapse({ }) 애니메이션의 전환 타이밍 기능
지속 숫자 undefined 애니메이션의 지속 시간(밀리초)입니다. 기본적으로 지속 시간은 접힌 요소의 높이를 기반으로 프로그래밍 방식으로 계산됩니다.
onCollapseStart 기능 노옵 축소 애니메이션이 시작될 때 호출되는 핸들러
onCollapseEnd 기능 노옵 축소 애니메이션이 종료될 때 호출되는 핸들러
확장 시작 기능 노옵 확장 애니메이션이 시작될 때 호출되는 핸들러
확장 종료 기능 노옵 확장 애니메이션이 끝날 때 호출되는 핸들러

당신이 얻는 것

이름 설명
getCollapseProps 축소 요소에 펼쳐져야 하는 소품 개체를 반환하는 함수
getToggleProps 축소 패널을 토글하는 요소에 확산되어야 하는 소품 개체를 반환하는 함수
isExpanded 축소 확장 여부(제어되지 않는 경우)
세트확장 후크의 내부 isExpanded 상태를 설정합니다.

대체 솔루션

  • 반응 스프링 - 잠재적으로 더 부드러운 애니메이션을 가질 수 있는 JavaScript 애니메이션 기반 라이브러리. 접근 가능한 축소 구성 요소를 만들려면 조금 더 작업이 필요합니다.
  • 반응 애니메이션 높이 - CSS 전환을 사용하여 모든 높이에 애니메이션을 적용하는 또 다른 라이브러리. 후크가 아닌 구성 요소를 제공합니다.

자주하는 질문

ư세로 적용시 |_+_| |_+_|를 받는 구성 요소에 애니메이션이 버벅거리고 완전히 축소되지 않습니다. 무엇을 제공합니까?

축소는 |_+_| 재산. 요소에 수직 패딩이 있는 경우 |_+_|가 있더라도 해당 패딩은 요소의 크기를 확장합니다.

이를 방지하려면 요소에서 내부에 직접 중첩된 요소로 패딩을 이동하기만 하면 됩니다.

false

다운로드 세부 정보:

작가: 로진파러

데모: https://react-collapsed.netlify.app/

소스 코드: https://github.com/roginfarrer/react-collapsed

#react #reactjs #자바스크립트