goncharov-ui
TypeScript icon, indicating that this package has built-in type declarations

1.0.24 • Public • Published

IG-UI

IG-UI — это пользовательский интерфейсный набор компонентов для React и TypeScript, созданный для упрощения разработки интерфейсов. Включает готовые стилизованные компоненты с поддержкой кастомизации и гибкой интеграции.


📦 Установка

Установите библиотеку через npm:

npm install goncharov-ui

Или с помощью pnpm:

pnpm i goncharov-ui

Или с помощью yarn:

yarn add goncharov-ui

🔗 Ссылки


🚀 Быстрый старт

1) Импорт компонента:

Избирательный импорт

import { Button } from 'goncharov-ui/dist/components/Button';

const App = () => (
  <Button size="small">Small Button</Button>
);

2) Подключение стилей

import 'goncharov-ui/dist/index.css';

🛠️ Компоненты

Button

Описание: Кнопка с поддержкой размеров и кастомных классов.

Пример использования:

import { Button } from 'goncharov-ui/dist/components/Button';

<Button size="medium" onClick={() => console.log('Clicked!')}>
  Click Me
</Button>

Параметры:

Параметр Тип По умолчанию Описание
size `'small' 'medium' 'large'`
className string '' Дополнительные CSS классы
...props ButtonHTMLAttributes<HTMLButtonElement> - Дополнительные свойства кнопки

AnimateBG

Описание: Компонент для ввода с анимированным фоном.

Пример использования:

import {AnimateBG} from "goncharov-ui/dist/components/AnimateBG";

<AnimateBG inputLength={6} backgroundColor="#d4af37" inputType="text" />

Параметры:

Параметр Тип По умолчанию Описание
inputLength number 4 Максимальная длина ввода
backgroundColor string '#4a4a4a' Цвет фона анимации
inputType React.HTMLInputTypeAttribute 'text' Тип инпута
customInput React.ReactElement undefined Пользовательский компонент ввода

🌟 Особенности

  • Полная документация доступна в Storybook.
  • Поддержка избирательного импорта для улучшения производительности.
  • Гибкая настройка и кастомизация.
  • Написано с использованием React и TypeScript.

📚 Документация

Для более подробной информации о компонентах, их свойствах и примерах использования, посетите Storybook.


🤝 Вклад

Если вы хотите внести изменения или улучшить библиотеку:

  1. Сделайте форк репозитория.
  2. Создайте новую ветку для ваших изменений: git checkout -b feature-name.
  3. Внесите изменения и отправьте PR.

📝 Лицензия

Проект распространяется под лицензией ISC. См. LICENSE для подробностей.

Package Sidebar

Install

npm i goncharov-ui

Weekly Downloads

21

Version

1.0.24

License

ISC

Unpacked Size

83.5 kB

Total Files

34

Last publish

Collaborators

  • ilya_goncharov_y