HOC Component Library

A React Higher-Order Component (HOC) library built with TypeScript, Tailwind CSS, and Next.js SSR support.

Installation

npm install hoc-component-library

Requirements

• React >=16.8.0
• Next.js (optional, for SSR features)

Styling

This library ships with pre-compiled Tailwind CSS styles. You have two options for including the styles:

Option 1: Import the CSS file (Recommended)

// In your main CSS file or app entry point
import 'hoc-component-library/styles.css';

Option 2: Include in your Tailwind build (Advanced)

If you're already using Tailwind CSS v4 in your project, you can include our library's source files in your Tailwind build process:

/* In your main CSS file */
@import "tailwindcss";

@source "node_modules/hoc-component-library/dist";

Note: This library uses Tailwind CSS v4 and ships with all necessary styles pre-compiled. You don't need to install or configure Tailwind CSS yourself unless you want to customize the styles.

Usage

Standard React Usage

import { withButton, withContainer, withTypology } from 'hoc-component-library';

Next.js Usage (SSR-optimized)

// For Next.js projects, use the SSR-optimized imports
import { withButton, withContainer, withNextFont } from 'hoc-component-library/nextjs';

Basic HOCs

import { withButton, withContainer, withTypology } from 'hoc-component-library';

// Create a button component
const MyButton = withButton('button', 
  { padding: 'px-4 py-2', borderRadius: 'rounded-md' }, // size config
  { backgroundColor: 'bg-blue-500', textColor: 'text-white' } // UI config
);

// Create a container component
const MyContainer = withContainer('div');

// Create typography component
const MyHeading = withTypology('h1');

Composing HOCs

import { composeHOCs, withContainer, withTypology } from 'hoc-component-library';

const EnhancedComponent = composeHOCs([
  withContainer,
  [withTypology, { size: 'large' }]
])('div');

Using Variants

import { withVariant } from 'hoc-component-library';

const variants = {
  primary: MyPrimaryButton,
  secondary: MySecondaryButton
};

const VariantButton = withVariant(variants);

// Usage
<VariantButton variant="primary">Click me</VariantButton>

Utilities

import { cn, getFlexClassname } from 'hoc-component-library';
import type { FlexContainerType } from 'hoc-component-library';

// Combine classes
const className = cn('bg-red-500', 'text-white', 'p-4');

// Get flex classes
const flexClass = getFlexClassname('cc'); // 'justify-center items-center'

Next.js SSR Support

Using with Next.js Fonts

import { withNextFont, createFallbackFont } from 'hoc-component-library/nextjs';
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

// Create typography component with Next.js font
const MyText = withNextFont('p', {
  typology: inter,
  size: 'text-lg',
  weight: 'font-medium'
});

// For non-Next.js environments, use fallback
const fallbackFont = createFallbackFont('font-sans');

SSR-Safe Components

import { withSSRSafe, createSSRSafeComponent } from 'hoc-component-library';

// Wrap components that might cause hydration issues
const SafeComponent = withSSRSafe(MyComponent);

// Dynamic import with SSR safety
const DynamicComponent = createSSRSafeComponent(
  () => import('./MyHeavyComponent'),
  () => <div>Loading...</div> // fallback during SSR
);

Environment Detection

import { isNextJSEnvironment } from 'hoc-component-library/nextjs';

if (isNextJSEnvironment()) {
  // Next.js specific logic
} else {
  // Standard React logic
}

Available HOCs

• withButton - Enhanced button components with size and UI configurations
• withContainer - Container components with flex and sizing options
• withRow - Row layout components
• withCol - Column layout components
• withNavbar - Navigation bar components
• withSnap - Snap/scrolling components
• withTypology - Typography components
• withVariant - Variant-based component wrapper

Development

# Install dependencies
npm install

# Build the library
npm run build

# Watch mode for development
npm run dev

# Type checking
npm run type-check

Publishing

# Clean and build before publishing
npm run prepublishOnly

# Publish to npm
npm publish

License

MIT