npm package: @oreqovishal/oreqo-community
Description: A modern, type-safe React library with components, hooks, and utilities
Latest version: 0.1.0

# @oreqovishal/oreqo-community

A modern, type-safe React library built with TypeScript. Compatible with React 16.8+.

## Features

- 🎨 **UI Components** - Pre-built, customizable React components
- 🪝 **Custom Hooks** - Useful React hooks for common patterns
- 🛠️ **Utilities** - Helper functions for formatting and more
- 📦 **Tree-shakeable** - Only import what you need
- 🔷 **TypeScript** - Full type safety and IntelliSense support
- ⚡ **Modern Build** - Dual CJS/ESM support
- 🔄 **React 16.8+** - Compatible with React 16.8 and above

## Installation

```bash
npm install @oreqovishal/oreqo-community
```

or

```bash
yarn add @oreqovishal/oreqo-community
```

or

```bash
pnpm add @oreqovishal/oreqo-community
```

## Requirements

- React >= 16.8.0
- React-DOM >= 16.8.0

## Usage

### Components

```tsx
import { Button } from '@oreqovishal/oreqo-community';

function App() {
  return (
    <Button
      variant="primary"
      size="md"
      onClick={() => console.log('Clicked!')}
    >
      Click me
    </Button>
  );
}
```

### Hooks

#### useLocalStorage

Persist state to localStorage with automatic synchronization.

```tsx
import { useLocalStorage } from '@oreqovishal/oreqo-community';

function App() {
  const [name, setName, removeName] = useLocalStorage('userName', 'Guest');

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button onClick={removeName}>Clear</button>
    </div>
  );
}
```

#### useDebounce

Debounce any value to reduce unnecessary updates.

```tsx
import { useDebounce } from '@oreqovishal/oreqo-community';
import { useState } from 'react';

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  // Use debouncedSearchTerm for API calls
  // It will only update 500ms after the user stops typing

  return (
    <input
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="Search..."
    />
  );
}
```

### Utilities

```tsx
import {
  classNames,
  formatCurrency,
  formatDate,
  truncate
} from '@oreqovishal/oreqo-community';

// Combine class names
const className = classNames('base', isActive && 'active', 'extra');
// Result: "base active extra"

// Format currency
const price = formatCurrency(1234.56);
// Result: "$1,234.56"

// Format dates
const formattedDate = formatDate(new Date());
// Result: "January 15, 2025"

// Truncate strings
const shortened = truncate('This is a very long text', 10);
// Result: "This is..."
```

## API Documentation

### Components

#### Button

A customizable button component.

**Props:**
- `children: ReactNode` - Button content
- `onClick?: (event: MouseEvent) => void` - Click handler
- `disabled?: boolean` - Disable the button
- `variant?: 'primary' | 'secondary' | 'outline'` - Button style variant
- `size?: 'sm' | 'md' | 'lg'` - Button size
- `className?: string` - Additional CSS classes
- `style?: CSSProperties` - Inline styles

### Hooks

#### useLocalStorage<T>(key: string, initialValue: T)

Returns: `[T, (value: T | ((val: T) => T)) => void, () => void]`

- `key` - localStorage key
- `initialValue` - Default value if key doesn't exist

Returns:
- Current value
- Setter function
- Remove function

#### useDebounce<T>(value: T, delay?: number)

Returns: `T`

- `value` - Value to debounce
- `delay` - Delay in milliseconds (default: 500)

Returns: Debounced value

### Utilities

#### classNames(...classes)

Combines class names, filtering out falsy values.

#### formatCurrency(amount, currency?, locale?)

Formats a number as currency.

#### formatDate(date, locale?)

Formats a date to a readable string.

#### truncate(str, maxLength, suffix?)

Truncates a string to a specified length.

## Development

```bash
# Install dependencies
npm install

# Build the library
npm run build

# Run linting
npm run lint

# Format code
npm run format

# Type check
npm run typecheck
```

## Build Output

The library is built with dual module support:

- **ESM** (`dist/index.js`) - For modern bundlers
- **CommonJS** (`dist/index.cjs`) - For Node.js and older tools
- **TypeScript** (`dist/index.d.ts`) - Type definitions

## Browser Support

This library supports all modern browsers that support ES2022 features. For older browsers, make sure to transpile the library code in your build process.

## Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a PR.

## License

MIT © [Your Name]

## Changelog

See [CHANGELOG.md](./CHANGELOG.md) for version history.