Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ilyagoncharovy/ig-ui
https://github.com/ilyagoncharovy/ig-ui
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/ilyagoncharovy/ig-ui
- Owner: IlyaGoncharovY
- Created: 2024-12-26T17:58:29.000Z (14 days ago)
- Default Branch: main
- Last Pushed: 2024-12-26T18:10:03.000Z (14 days ago)
- Last Synced: 2024-12-26T19:19:24.152Z (14 days ago)
- Language: JavaScript
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# IG-UI
**IG-UI** — это пользовательский интерфейсный набор компонентов для React и TypeScript, созданный для упрощения разработки интерфейсов. Включает готовые стилизованные компоненты с поддержкой кастомизации и гибкой интеграции.
---
## 📦 Установка
Установите библиотеку через npm:
```bash
npm install goncharov-ui
```
Или с помощью pnpm:
```bash
pnpm i goncharov-ui
```
Или с помощью yarn:
```bash
yarn add goncharov-ui
```
---
## 🔗 Ссылки
- GitHub репозиторий: [IG-UI GitHub](https://github.com/IlyaGoncharovY/ig-ui)
- Storybook документация: [Storybook IG-UI](https://ilyagoncharovy.github.io/ig-ui/)
- npm пакет: [goncharov-ui](https://www.npmjs.com/package/goncharov-ui)
---
## 🚀 Быстрый старт
### 1) Импорт компонента:
**Избирательный импорт**
```tsx
import { Button } from 'goncharov-ui/Button';
const App = () => (
Small Button
);
```
### 2) Подключение стилей
**Не требуется**
---
## 🛠️ Компоненты
### Button
**Описание:** Кнопка с поддержкой размеров и кастомных классов.
**Пример использования:**
```tsx
import { Button } from 'goncharov-ui/Button';
console.log('Clicked!')}>
Click Me
```
**Параметры:**
| Параметр | Тип | По умолчанию | Описание |
|--------------|-------------------------------|--------------|------------------------------------|
| `size` | `'small' | 'medium' | 'large'` | `'medium'` | Размер кнопки |
| `className` | `string` | `''` | Дополнительные CSS классы |
| `...props` | `ButtonHTMLAttributes` | - | Дополнительные свойства кнопки |
---
### AnimateBG
**Описание:** Компонент для ввода с анимированным фоном.
**Пример использования:**
```tsx
import {AnimateBG} from "goncharov-ui/AnimateBG";
```
**Параметры:**
| Параметр | Тип | По умолчанию | Описание |
|--------------|-------------------------------|--------------|------------------------------------|
| `inputLength` | `number` | `4` | Максимальная длина ввода |
| `backgroundColor` | `string` | `'#4a4a4a'` | Цвет фона анимации |
| `inputType` | `React.HTMLInputTypeAttribute` | `'text'` | Тип инпута |
| `customInput` | `React.ReactElement` | `undefined` | Пользовательский компонент ввода |
---
## 🌟 Особенности
- Полная документация доступна в [Storybook](https://ilyagoncharovy.github.io/ig-ui/).
- Поддержка избирательного импорта для улучшения производительности.
- Гибкая настройка и кастомизация.
- Написано с использованием React и TypeScript.
---
## 📚 Документация
Для более подробной информации о компонентах, их свойствах и примерах использования, посетите [Storybook](https://ilyagoncharovy.github.io/ig-ui/).
---
## 🤝 Вклад
Если вы хотите внести изменения или улучшить библиотеку:
1) Сделайте форк репозитория.
2) Создайте новую ветку для ваших изменений: `git checkout -b feature-name`.
3) Внесите изменения и отправьте PR.
---
## 📝 Лицензия
Проект распространяется под лицензией **ISC**. См. [LICENSE]() для подробностей.