Airtable을 데이터베이스로 사용하는 애플리케이션을 만들었습니다.나는 무미건조한 공백 페이지를 대체하기 위해 마이크로 모뎀을 사용했다. 그렇지 않으면 요청한 데이터가 도착하고 그에 상응하는 페이지를 보여주는 데 필요한 시간 안에 사용자에게 보일 것이다.
나는 기존의react 마이크로프로세서 라이브러리를 사용할 수 있었지만, 이 기회를 이용하여 자신의 마이크로프로세서와react 구성 요소 라이브러리를 구축하는 방법을 배우기로 결정했다.따라서, 이 글에서, 나는 당신에게 나의 라이브러리와 마이크로 모뎀을 어떻게 사용하는지 보여 드리겠습니다.

React 마이크로모뎀 라이브러리

더 말할 것도 없이 여기는 나의react 마이크로프로세서 라이브러리(GitHub,Bit이다.그것은 불러오는 것에 기초를 두고 있다.io CSS 로더.마이크로 모뎀을 쉽게 사용자 정의할 수 있도록 색과 크기를 구성 요소 도구로 보내는 옵션을 추가했습니다.마이크로 모뎀 (총 12개) 을 bit.dev 으로 내보냈기 때문에, 비트의 라이브 플레이 그룹에서 쉽게 보고 조정할 수 있으며, NPM 또는 Yarn이 있는 패키지로 설치할 수 있습니다. (또는 비트 import를 사용하여 원본 코드를 얻을 수 있습니다.)

JoshK2 / 반응 마이크로 모뎀 css

순수한 css를 가진 React 마이크로모뎀 구성 요소의 놀라운 집합

React Spinners CSS Loaders（Vue、Angular）

순수한 css를 포함하는 React 마이크로모뎀 구성 요소의 놀라운 집합입니다.
React 회전기는 부하를 기반으로 합니다.io와 웹 전체에서 왔습니다.
자신의 마이크로 모뎀을 추가하려면 contributing guidelines 을 따르십시오.

💅추가 CSS 가져오기 없음

✂️제로 의존성

📦마이크로 모뎀은 단독으로 설치할 수 있다

현장 프레젠테이션

Bit를 사용하여 구성 요소를 탐색하고 도구를 탐색합니다.
npm, 실 또는 드릴을 사용하여 특정한react방적기 부품을 설치하고 전체 항목을 설치할 필요가 없습니다.
Install components and live demo

🚀 마이크로 모뎀 목록 - 아이템 종류와 기본 아이템

각 구성 요소는 하나씩color 아이템을 수락하고, 구성 요소도 드물게size 아이템을 수락합니다.
기본 color 아이템은 #7f58af 입니다.size 도구를 수락하는 구성 요소는 기본 픽셀 크기입니다.
회전기
색상: 문자열
사이즈: 수량
클래스 이름:string
스타일: 객체<Circle/> #7f58af 64 "" {} <Default/> #7f58af 80 "" {}…
View on GitHub
예를 들어, 이것은 원형 마운터입니다. 구성 요소는 색과 크기 도구를 수신할 수 있습니다.

이 코드는 불러올 때와 똑같은 매우 간단한 CSS 코드를 가져옵니다.io CSS 로더:

How to use Loader animation in your React.js application?

따라서 요청을 보내고 받은 데이터를 상태 대상에 저장하는 구성 요소가 있습니다.명백히 알 수 있듯이 해야 할 일은 수조가 비어 있는지 확인하는 것입니다. 비어 있으면 마이크로 모뎀을 표시합니다

이 예에서 나는 Facebook spinner를 사용했는데 그 중 매우 간단한 페이지가 하나 있다. 자동차 목록이 나타날 때까지 5초 동안 기다린다

의 사용은 매우 간단하며, 데이터를 불러오기 전에 멋진 애니메이션 불러오는 프로그램을 표시할 수 있습니다

그 밖에 모든 마이크로 모뎀에서 사용자 정의 색을 사용할 수 있습니다. 컬러 속성에서 색을 보내면 다음과 같습니다.

<Facebook color="red" />
<Facebook color="#cecece" />

또는 내 random color generator component 랜덤 색상을 미친 듯이 사용하거나

<Facebook color={getRandomColor()} />

이 실시간 프레젠테이션에서 랜덤 색상의 결과를 볼 수 있습니다facebook react spinner

더 많은react 마이크로스피커 예시를 보려면 bit.dev 내react 마이크로스피커 구성 요소 집합을 보십시오

어떤 문제나 부족한 기능에 대해서는 GitHub에서 질문을 열어 주십시오. 최선을 다하겠습니다

당연하지, 네가 좋아하면 별을 붙여줘