React Button Factory

A highly customizable React button component built with Factory Pattern and Abstraction.

Important: Tailwind CSS Required

This package uses Tailwind CSS for styling. You must have Tailwind configured in your project!

Installation

npm install @abhimanew2000/react-button-factory

Tailwind CSS Setup

1. Install Tailwind (if not already installed)

npm install -D tailwindcss
npx tailwindcss init

2. Configure Tailwind

Update your tailwind.config.js:

export default {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@abhimanew2000/react-button-factory/dist/**/*.{js,cjs}", //  Add this!
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Import Tailwind CSS

In your main CSS file (e.g., src/index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Restart Dev Server

After changing config, restart your dev server:

npm run dev

Usage

import { Button } from '@abhimanew2000/react-button-factory';

function App() {
  return (
    <div>
      <Button variant="primary" size="large">
        Click Me
      </Button>
    </div>
  );
}

Props

Visual Properties

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' | 'secondary' | 'danger' | 'success' | 'outline' | 'primary' | Button color | | size | 'small' | 'medium' | 'large' | 'medium' | Button size | | shape | 'rounded' | 'square' | 'pill' | 'rounded' | Border radius | | weight | 'light' | 'normal' | 'bold' | 'normal' | Font weight | | shadow | 'none' | 'small' | 'medium' | 'large' | 'none' | Shadow depth |

Content Properties

| Prop | Type | Description | |------|------|-------------| | children | ReactNode | Button text/content (required) | | icon | ReactNode | Icon element | | iconPosition | 'left' | 'right' | Icon position |

Behavioral Properties

| Prop | Type | Default | Description | |------|------|---------|-------------| | onClick | () => void | - | Click handler | | disabled | boolean | false | Disabled state | | loading | boolean | false | Loading state | | type | 'button' | 'submit' | 'reset' | 'button' | HTML button type | | className | string | '' | Additional classes |

Examples

Different Variants

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="danger">Danger</Button>
<Button variant="success">Success</Button>
<Button variant="outline">Outline</Button>

Different Sizes

<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

Different Shapes

<Button shape="square">Square</Button>
<Button shape="rounded">Rounded</Button>
<Button shape="pill">Pill</Button>

With Icons

<Button icon={<SaveIcon />} iconPosition="left">
  Save
</Button>

<Button icon={<TrashIcon />} iconPosition="right">
  Delete
</Button>

Loading State

<Button variant="primary" loading>
  Saving...
</Button>

Combined Properties

<Button 
  variant="danger" 
  size="large"
  shape="pill"
  weight="bold"
  shadow="large"
>
  Delete Account
</Button>

Troubleshooting

Buttons have no styling

Problem: Classes present but no colors/styles

Solution:

1. Make sure Tailwind CSS is installed
2. Add package path to tailwind.config.js content array
3. Restart dev server after config change

Only one variant works

Problem: Only primary button has color

Solution: Use safelist in your Tailwind config:

export default {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  safelist: [
    'bg-blue-600', 'bg-gray-600', 'bg-red-600', 'bg-green-600',
    'hover:bg-blue-700', 'hover:bg-gray-700', 'hover:bg-red-700', 'hover:bg-green-700',
  ],
}

Architecture

Built with:

• Factory Pattern for flexible creation
• Abstraction for easy extension
• TypeScript for type safety
• Tailwind CSS for styling

License

MIT

Author

abhimanew ([email protected])

Links

• NPM Package

Made with using Factory Pattern + Abstraction