# React Component Example

Reusable React component

## Code Example

```javascript
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';

// Custom Button Component
const Button = ({ 
  children, 
  variant = 'primary', 
  size = 'medium', 
  disabled = false, 
  onClick,
  ...props 
}) => {
  const baseClasses = 'font-medium rounded-lg transition-colors focus:outline-none focus:ring-2';
  
  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500',
    danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500'
  };
  
  const sizeClasses = {
    small: 'px-3 py-1.5 text-sm',
    medium: 'px-4 py-2 text-base',
    large: 'px-6 py-3 text-lg'
  };
  
  const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`;
  
  return (
    <button
      className={classes}
      disabled={disabled}
      onClick={onClick}
      {...props}
    >
      {children}
    </button>
  );
};

Button.propTypes = {
  children: PropTypes.node.isRequired,
  variant: PropTypes.oneOf(['primary', 'secondary', 'danger']),
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  disabled: PropTypes.bool,
  onClick: PropTypes.func
};

// Usage Example
const App = () => {
  const [count, setCount] = useState(0);
  
  return (
    <div className="p-8 space-y-4">
      <h1 className="text-2xl font-bold">Button Component Example</h1>
      <div className="space-x-4">
        <Button onClick={() => setCount(count + 1)}>
          Count: {count}
        </Button>
        <Button variant="secondary" size="large">
          Secondary
        </Button>
        <Button variant="danger" disabled>
          Disabled
        </Button>
      </div>
    </div>
  );
};

export default App;
```

## Files

- src/components/Button.jsx
- src/App.jsx
- package.json

## Usage

```bash
# Install dependencies
npm install

# Run the example
npm start
```