@abhijeet42cy6/vector-lines/README.md

Reusable 3-line vector pattern (27×26 Y-shape) for React projects

# React Three-Line Pattern Component

A lightweight, customizable React component that creates a seamless background pattern of Y-shaped elements. Perfect for adding subtle, geometric textures to your React applications.

## 🎯 Features

- ✨ Seamless pattern with three-line Y-shaped elements
- 🎨 Fully customizable colors and dimensions
- 📱 Responsive and scalable
- 🚀 Easy to integrate
- 🎮 Non-intrusive (doesn't interfere with interactions)
- 🎬 Animation-ready with CSS transitions

## 📦 Installation

### NPM
```bash
npm install vector-lines
```

### Yarn
```bash
yarn add vector-lines
```

## 🚀 Usage

Basic usage:
```jsx
import ThreeLinePattern from 'vector-lines';

function YourComponent() {
  return (
    <div style={{ position: 'relative' }}>
      <ThreeLinePattern />
      Your content here
    </div>
  );
}
```

Customized usage:
```jsx
<ThreeLinePattern 
  lineColor="#e0e0e0"    // Color of the lines
  lineWidth={1}          // Width of the lines in pixels
  spacing={40}           // Space between pattern repetitions
  style={{              // Optional additional styles
    opacity: 0.5,
    transition: 'all 0.3s ease'  // Enable smooth transitions
  }}
/>
```

## ⚙️ Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `lineColor` | string | '#e0e0e0' | Color of the pattern lines |
| `lineWidth` | number | 1 | Width of the lines in pixels |
| `spacing` | number | 40 | Space between pattern repetitions |
| `style` | object | {} | Additional CSS styles to apply |
| `line1Start` | object | `{x: 13.5, y: 0}` | Start coordinates for vertical line |
| `line1End` | object | `{x: 13.5, y: 13}` | End coordinates for vertical line |
| `line2Start` | object | `{x: 13.5, y: 13}` | Start coordinates for horizontal line |
| `line2End` | object | `{x: 0, y: 13}` | End coordinates for horizontal line |
| `line3Start` | object | `{x: 13.5, y: 13}` | Start coordinates for diagonal line |
| `line3End` | object | `{x: 26, y: 25.5}` | End coordinates for diagonal line |

## 🎨 Styling

The component creates an absolutely positioned div that covers its parent container. Make sure the parent has:
```css
position: relative;
```

## 📝 Important Notes

1. **Container Positioning**: The parent container must have `position: relative` for the pattern to display correctly.

2. **Pattern Placement**: The pattern will automatically fill its container while staying in the background.

3. **Performance**: The pattern uses SVG converted to base64, making it efficient and easy to use.

## 🌟 Examples

### Basic Background
```jsx
function App() {
  return (
    <div style={{ position: 'relative', minHeight: '100vh' }}>
      <ThreeLinePattern />
      <h1>Your Content</h1>
    </div>
  );
}
```

### Custom Styling
```jsx
function CustomSection() {
  return (
    <div style={{ position: 'relative', padding: '20px' }}>
      <ThreeLinePattern 
        lineColor="#007bff"
        lineWidth={2}
        spacing={60}
        style={{ opacity: 0.2 }}
      />
      <h2>Section Content</h2>
    </div>
  );
}
```

### Multiple Patterns
```jsx
function LayeredPattern() {
  return (
    <div style={{ position: 'relative' }}>
      <ThreeLinePattern 
        lineColor="#007bff"
        spacing={40}
      />
      <ThreeLinePattern 
        lineColor="rgba(0, 255, 0, 0.5)"
        spacing={80}
        style={{ opacity: 0.1 }}
      />
      <div>Your Content</div>
    </div>
  );
}
```

### Animations

The component supports various animation techniques:

#### 1. Color Transitions
```jsx
function ColorTransition() {
  return (
    <ThreeLinePattern 
      lineColor="#007bff"
      style={{
        transition: 'all 0.3s ease',
        ':hover': {
          backgroundColor: 'rgba(0,0,0,0.1)'
        }
      }}
    />
  );
}
```

#### 2. Moving Pattern
```jsx
function MovingPattern() {
  return (
    <ThreeLinePattern 
      style={{
        animation: 'movePattern 20s linear infinite'
      }}
    />
  );
}

// In your CSS:
@keyframes movePattern {
  from {
    backgroundPosition: 0 0;
  }
  to {
    backgroundPosition: 100% 100%;
  }
}
```

#### 3. Dynamic Line Coordinates
```jsx
function BreathingPattern() {
  const [scale, setScale] = useState(1);
  
  return (
    <ThreeLinePattern 
      line1End={{ x: 13.5, y: 13 * scale }}
      line2End={{ x: 27 * scale, y: 14 }}
      line3End={{ x: 9 * scale, y: 19 }}
      style={{ transition: 'all 0.5s ease-in-out' }}
    />
  );
}
```

## 🔧 Troubleshooting

1. **Pattern not visible?**
   - Check if the parent container has `position: relative`
   - Verify the pattern's opacity and color values
   - Ensure the container has dimensions (height/width)

2. **Pattern too prominent?**
   - Adjust the `lineWidth` prop
   - Modify the `opacity` via the style prop
   - Try a lighter `lineColor`

3. **Pattern size issues?**
   - Adjust both `spacing` and `size` props
   - The `spacing` controls the distance between pattern repeats

## 🤝 Contributing

Feel free to customize and enhance this component for your specific needs. Some ideas for extensions:
- Add animation support
- Implement different pattern variations
- Add gradient support for lines
- Create preset patterns

## 🛠 Development

1. Clone the repository
```bash
git clone https://github.com/yourusername/vector-lines.git
cd vector-lines
```

2. Install dependencies and start the demo
```bash
npm install
npm run dev
```

## 📄 License

MIT License - Feel free to use in your projects!