ValyroUI English version

GitHub Stars Button

Ссылка на репозиторий с прокручивающимся числом звёзд. Pro · Анимированные компоненты › Кнопки

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add github-stars-button
npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { GitHubStarsButton } from 'valyro-ui-pro';

Пропсы

PropTypeDefault
repo *stringRepository as owner/name; the link goes to it unless href is given.
count *numberStar count from your own source — a cached server request, a build step. The button never calls the GitHub API itself (rate limits, errors and caching stay with the app).
formatIntl.NumberFormatOptions{ notation: 'compact', maximumFractionDigits: 1 }How the count is written (default compact: 12.3K).
localestringLocale for the count (default: the ThemeProvider's, then the browser's).
rollOnViewbooleantrueRoll the count up from zero when the button scrolls into view (default true).
variant'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'link''secondary'Button look (default secondary).
size'sm' | 'md' | 'lg''md'Button size.
hoverScalenumber1.05Scale under a hovering mouse (default 1.05), as Button's hoverScale.
tapScalenumber0.95Scale while pressed (default 0.95), as Button's tapScale.
labelsPartial<GitHubStarsButtonLabels>Overrides for the built-in English text; keys left out keep their defaults.

Похожие компоненты

  • Toggle — Кнопка-переключатель с пружинным откликом
  • Flip Button — Кнопка с двумя сторонами, переворачивается на пружине
  • Liquid Button — Кнопка, которая заполняется «жидкостью» при наведении
  • Theme Toggler — Смена светлой и тёмной темы с раскрытием через View Transitions
  • Share Button — Кнопка, раскрывающая иконки соцсетей
  • Code Tabs — Варианты кода во вкладках: npm, pnpm, bun — с копированием
  • Number Wheel — Число на вращающемся барабане с соседними значениями
  • Pin List — Список с закреплением: элементы плавно переезжают между группами
  • Notification Stack — Стопка уведомлений, раскрывающаяся в список
  • Todo List — Чек-лист с волнистым зачёркиванием выполненных пунктов
  • Presence Avatars — Кто онлайн: аватары перестраиваются при смене статуса
  • Radial Menu — Кольцевое контекстное меню по правому клику

Назад: Theme Toggler · Далее: Share Button · Весь раздел «Анимированные компоненты»