Я создал приложение, которое использует Airtable в качестве базы данных. Я использовал счетчик, чтобы заменить унылую пустую страницу, которая в противном случае была бы представлена пользователю за время, необходимое для получения запрошенных данных и для соответствующей отрисовки страницы.
Я мог бы использовать существующую библиотеку счетчиков реакции, но вместо этого я решил использовать этот шанс, чтобы научиться создавать свои собственные счетчики и свою собственную библиотеку компонентов React. Итак, в этом посте я покажу вам свою библиотеку и пример использования счетчика.
Библиотека React Spinners
Итак, без лишних слов, вот моя библиотека реагирующих прядильщиков (GitHub, Bit). Он основан на загрузчиках CSS loading.io. Я добавил возможность отправлять цвет и размер в качестве свойств компонента, чтобы упростить настройку счетчиков. Я экспортировал счетчики (всего двенадцать) в bit.dev, чтобы вы могли легко просматривать и настраивать их на игровой площадке Bit и устанавливать их как пакеты с NPM или Yarn (или получать их исходный код с помощью импорта Bit).
Например, это загрузчик круга, и компонент может получать реквизиты цвета и размера:
и код импортирует очень простой код CSS, точно такой же, как из загрузчика CSS loading.io:
Как использовать анимацию загрузчика в вашем приложении React.js?
Итак, у вас есть компонент, который отправляет запрос и сохраняет полученные данные в массиве внутри вашего объекта состояния. Очевидно, что нужно сделать, это проверить, пуст ли массив, и если да, отобразить счетчик.
В этом примере я использовал счетчик Facebook с очень простой страницей, ожидающей 5 секунд, пока не отобразится список автомобилей.
Он очень прост в использовании и позволяет показывать красивый загрузчик анимации до тех пор, пока данные не будут загружены.
Кроме того, вы можете использовать собственный цвет в любом счетчике, просто отправьте цвет внутри свойства цвета, например:
<Facebook color="red" /> <Facebook color="#cecece" />
Или будь сумасшедшим и используйте случайный цвет с моим компонентом генератора случайных цветов.
<Facebook color={getRandomColor()} />
Вы можете увидеть результат со случайным цветом в этой живой демонстрации facebook react spinner.
Если вы хотите увидеть больше примеров реагирующих спиннеров, посмотрите мою коллекцию компонентов реагирующих спиннеров в bit.dev.
По любым вопросам или отсутствующим функциям, пожалуйста, открывайте вопрос на GitHub, и я сделаю все возможное.
И, конечно, если вам это нравится, ставьте звезду!
И подписывайтесь на меня в Twitter, чтобы получать обновления функций.
