React의 체크박스 애니메이션
5297 단어 reactjavascripttutorialwebdev
안녕하세요 여러분 👋
안녕 친구들, 여기는 SnowBit입니다. 저는 열정적이고 독학으로 성공한 젊은 개발자이며 성공적인 개발자가 되려는 의도가 있습니다.
오늘 저는 멋진 내용을 가지고 다시 여기에 왔고 여러분이 새로운 것을 배우기를 바랍니다. 자, 시작하겠습니다.
이제 이와 같이 애니메이션하는 방법을 살펴보겠습니다.
1단계 - 이 패키지 설치
React 애플리케이션에 이 npm 패키지를 설치합니다.
$ npm i react-animated-checkbox
2단계 - 패키지 가져오기
import CheckBox from "react-animated-checkbox";
3단계 - 체크박스 생성
<CheckBox
checked={checked}
checkBoxStyle={{
checkedColor: "#34b93d",
size: 100,
unCheckedColor: "#b8b8b8"
}}
duration={400}
onClick={() => setChecked(true)}
/>
전체 소스 코드
import CheckBox from "react-animated-checkbox";
import { useState } from "react";
export default function App() {
const [checked, setChecked] = useState(false);
return (
<div className="App">
<h1>Hello world</h1>
<CheckBox
checked={checked}
checkBoxStyle={{
checkedColor: "#34b93d",
size: 100,
unCheckedColor: "#b8b8b8"
}}
duration={400}
onClick={() => setChecked(true)}
/>
</div>
);
}
읽어주셔서 감사합니다. 좋은 하루 보내세요!
당신의 감사는 나의 동기입니다 😊
Reference
이 문제에 관하여(React의 체크박스 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dhairyashah/animate-checkbox-in-react-30l0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)