IG-UI — это пользовательский интерфейсный набор компонентов для React и TypeScript, созданный для упрощения разработки интерфейсов. Включает готовые стилизованные компоненты с поддержкой кастомизации и гибкой интеграции.
Установите библиотеку через npm:
npm install goncharov-ui
Или с помощью pnpm:
pnpm i goncharov-ui
Или с помощью yarn:
yarn add goncharov-ui
- GitHub репозиторий: IG-UI GitHub
- Storybook документация: Storybook IG-UI
- npm пакет: goncharov-ui
Избирательный импорт
import { Button } from 'goncharov-ui/dist/components/Button';
const App = () => (
<Button size="small">Small Button</Button>
);
import 'goncharov-ui/dist/index.css';
Описание: Кнопка с поддержкой размеров и кастомных классов.
Пример использования:
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> |
- | Дополнительные свойства кнопки |
Описание: Компонент для ввода с анимированным фоном.
Пример использования:
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.
Если вы хотите внести изменения или улучшить библиотеку:
- Сделайте форк репозитория.
- Создайте новую ветку для ваших изменений:
git checkout -b feature-name
. - Внесите изменения и отправьте PR.
Проект распространяется под лицензией ISC. См. LICENSE для подробностей.