react-tiled-background/README.md

Reusable React component that adds an animated, Excel-style tile grid overlay to any element.

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})
```

# React Tiled Background

A React component that adds an animated, Excel-style tile grid overlay to any element. Perfect for creating interactive, modern UI elements with a subtle grid effect.

## Installation

```bash
npm install react-tiled-background
# or
yarn add react-tiled-background
# or
pnpm add react-tiled-background
```

## Usage

```tsx
import { TiledBackground } from 'react-tiled-background';

function App() {
  return (
    <TiledBackground>
      {/* Your content here */}
      <div>
        <h1>Hello World</h1>
        <p>This content will have a tiled background overlay</p>
      </div>
    </TiledBackground>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | - | Content to be rendered inside the tiled background |
| `tileWidth` | `number` | `100.46` | Width of each tile in pixels |
| `tileHeight` | `number` | `27.53` | Height of each tile in pixels |
| `pulsingPercentage` | `number` | `0.17` | Percentage of tiles that should pulse (0-1) |
| `className` | `string` | - | Additional CSS class names |

## CSS Variables

You can customize the appearance by overriding these CSS variables:

```css
:root {
  --tile-border-color: rgba(255, 255, 255, 0.1);
  --tile-pulse-color: rgba(255, 255, 255, 0.05);
  --tile-animation-duration: 2s;
}
```

## Examples

### Basic Usage
```tsx
<TiledBackground>
  <div style={{ padding: '2rem' }}>
    <h1>Welcome</h1>
    <p>This content will have a tiled background effect</p>
  </div>
</TiledBackground>
```

### Custom Tile Sizes
```tsx
<TiledBackground
  tileWidth={50}
  tileHeight={50}
  pulsingPercentage={0.3}
>
  <div>Your content here</div>
</TiledBackground>
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT © [Abhijeet Kumar](https://github.com/abhijeet42cy6)