HUI Components

A modern, lightweight React component library featuring essential UI components with TypeScript support and customizable styling.

📦 Installation

npm install hui-components

yarn add hui-components

pnpm add hui-components

✨ Features

🎨 Modern UI components designed for web applications.
📦 A set of high-quality React components out of the box.
🔷 Written in TypeScript with predictable static types.
🛠️ Whole package of development tools and utilities.
🌍 Lightweight with zero external dependencies.
🎯 Powerful customization based on CSS-in-JS.

🚀 Usage

InputStepper

A numeric input with increment/decrement buttons.

import React, { useState } from 'react';
import { InputStepper } from 'hui-components';

function App() {
  const [value, setValue] = useState(0);

  return (
    <InputStepper
      value={value}
      onChange={setValue}
      min={0}
      max={100}
      step={1}
    />
  );
}

Notification System

Display notifications with different types and positions.

import React from 'react';
import { NotificationProvider, useNotificationApi } from 'hui-components';

function NotificationDemo() {
  const notification = useNotificationApi();

  const showNotification = () => {
    notification.success({
      message: 'Success!',
      description: 'Operation completed successfully.',
      duration: 3,
    });
  };

  return <button onClick={showNotification}>Show Notification</button>;
}

function App() {
  return (
    <NotificationProvider placement="topRight" maxCount={5}>
      <NotificationDemo />
    </NotificationProvider>
  );
}

📋 API

InputStepper Props

Prop	Type	Default	Description
`value`	`number`	-	Current value
`onChange`	`function`	-	Value change callback
`min`	`number`	-	Minimum value
`max`	`number`	-	Maximum value
`step`	`number`	`1`	Step increment
`disabled`	`boolean`	`false`	Disable input
`size`	`string`	`'middle'`	Size: 'small', 'middle', 'large'

Notification Methods

notification.success({ message: 'Success!', duration: 3 });
notification.info({ message: 'Info message', duration: 4 });
notification.warning({ message: 'Warning!', duration: 5 });
notification.error({ message: 'Error!', duration: 0 });
notification.destroy(); // Clear all notifications

NotificationProvider Props

Prop	Type	Default	Description
`placement`	`string`	`'topRight'`	Position: 'top', 'topLeft', 'topRight', 'bottom', 'bottomLeft', 'bottomRight'
`maxCount`	`number`	`5`	Maximum notifications shown

🔗 Links

📄 License

MIT