반응형 버튼: 진행률 표시줄이 있는 3D 애니메이션 반응 버튼 구성 요소

반응을 위한 진행률 표시줄이 있는 애니메이션 버튼 라이브러리를 찾고 있었습니다. 이를 위해 UI 프레임워크를 추가하고 싶지 않았습니다. 내가 찾은 가장 가까운 것은 react-awesome-button 이었습니다. 그것은 꽤 좋지만 로딩 텍스트, 둥근 모양, 윤곽선 모양 또는 그림자 효과에 아이콘을 추가하는 것과 같은 많은 옵션이 없었습니다. 그런 다음 스스로 도서관을 만들기로 결정했습니다.

𝐑𝐞𝐚𝐜𝐭𝐢𝐯𝐞 𝐁𝐮𝐭𝐭𝐨𝐧은 진행률 표시줄이 있는 3D 애니메이션 반응 버튼 구성 요소입니다. 매우 가볍고 종속성이 없습니다. 거기에 아이콘을 추가할 수 있으며 재미있는 부분은 프로젝트에 타사 아이콘 라이브러리를 추가하지 않으려는 경우 기본 로드, 성공 및 오류 아이콘이 있다는 것입니다. 알리는 역할도 합니다. 따라서 이를 위해 많은 라이브러리를 설치할 필요가 없을 수도 있습니다.



귀하의 프로젝트에서 시도해 보시면 기쁠 것입니다. 그리고 ⭐️를 남겨주세요. 별은 우리가 더 많이 기여하도록 격려하며 비용은 들지 않습니다.

레포: https://github.com/arifszn/reactive-button

놀이터: https://arifszn.github.io/reactive-button/docs/playground

도서관의 목표는 진행 상황을 보여주는 것입니다. 아래 예제는 비동기 작업을 보여줍니다. 버튼을 클릭하면 비동기 작업(예: 데이터 가져오기, 양식 제출)이 처리되고 처리 후 성공 또는 오류 메시지가 표시됩니다.

문자열 값'idle'으로 상태를 초기화하고 'buttonState' 소품으로 할당합니다. 이제 유휴 텍스트를 렌더링합니다.

버튼을 클릭하면 상태 값을 'loading' 로 설정합니다.

작업이 완료되면 필요에 따라 상태를 'success' , 'error' 또는 'idle' 로 설정하십시오.

기본 사용법

import React, { useState } from 'react';
import ReactiveButton from 'reactive-button';

function App() {
   const [state, setState] = useState('idle');

   const onClickHandler = () => {
      setState('loading');
      setTimeout(() => {
         setState('success');
      }, 2000);
   }

   return (
      <ReactiveButton
         buttonState={state}
         onClick={onClickHandler}
      />
   );
}

export default App;

전체 사용

import React, { useState } from 'react';
import ReactiveButton from 'reactive-button';

function App() {
   const [state, setState] = useState('idle');

   const onClickHandler = () => {
      setState('loading');
      setTimeout(() => {
         setState('success');
      }, 2000);
   }

   return (
      <ReactiveButton
         buttonState={state}
         onClick={onClickHandler}
         color={'primary'}
         idleText={'Button'}
         loadingText={'Loading'}
         successText={'Success'}
         errorText={'Error'}
         type={'button'}
         className={'class1 class2'}
         style={{ borderRadius: '5px' }}
         outline={false}
         shadow={false}
         rounded={false}
         size={'normal'}
         block={false}
         messageDuration={2000}
         disabled={false}
         buttonRef={null}
         width={null}
         height={null}
         animation={true}
    />
  );
}

export default App;

비동기 작업의 경우 상태 관리가 필요하지 않습니다. 일반 버튼처럼 사용하세요.

기타 용도

Reactive Button에는 일반 버튼의 모든 기능이 있습니다.

색깔

Reactive Button은 10가지 기본 색상 옵션과 함께 제공됩니다.

<ReactiveButton color="primary"/>
<ReactiveButton color="secondary"/>
<ReactiveButton color="teal"/>
<ReactiveButton color="green"/>
<ReactiveButton color="red"/>
<ReactiveButton color="violet"/>
<ReactiveButton color="blue"/>
<ReactiveButton color="yellow"/>
<ReactiveButton color="dark"/>
<ReactiveButton color="light"/>

크기

4가지 사이즈가 준비되어 있습니다.

<ReactiveButton size="tiny"/>
<ReactiveButton size="small"/>
<ReactiveButton size="medium"/>
<ReactiveButton size="large"/>

스타일

이러한 사용자 정의 옵션을 사용하여 버튼을 더 아름답게 만드십시오.

<ReactiveButton outline/>
<ReactiveButton rounded/>
<ReactiveButton shadow/>

기존 상태

프로젝트에서 부울 값만 허용하는 표시기 로드에 대한 기존 상태가 있을 수 있습니다. Reactive Button에 대한 새 상태를 정의하지 않으려면 기존 상태를 활용하십시오.

const [loading, setLoading] = useState(false);

return (
   <ReactiveButton
      buttonState={loading ? 'loading' : 'idle'}
      idleText={'Button'}
      loadingText={'Loading'}
   />
);

상태 없이

항상 상태를 사용하도록 제한되지 않습니다.

<ReactiveButton
   onClick={doSomething}
   idleText={"Some Text"}
/>

아이콘 사용

나만의 아이콘을 사용할 수 있습니다. 상위 요소로 래핑하는 것을 잊지 마십시오.

<ReactiveButton
   idleText={<span><FontAwesomeIcon icon={faReply}/> Send</span>}
/>

양식 제출

버튼 클릭으로 양식을 제출해야 하는 경우 type prop을 'submit'로 설정하십시오.

<form>
   <input type="text" name="username"/>
   <input type="password" name="password"/>
   <ReactiveButton
      type={'submit'}
      idleText="Submit"
   />
</form>

앵커 태그

반응형 버튼을 앵커 태그로 사용하려면 앵커 태그로 래핑하기만 하면 됩니다.

<a href="https://github.com/" target="_blank">
   <ReactiveButton idleText="Visit Github" />
</a>

내 다른 작품:

Reddit Image Fetcher : reddit 이미지, 밈, 배경 화면 등을 가져오기 위한 JavaScript 패키지입니다.