hexagon-background v1.0.2

Hexagon Background Effects

This project provides reusable React components that add a stylish hexagon background effect to your application. You can wrap your content with these components to display hexagonal patterns with three distinct hover effects:

1. Filled Hexagon Hover: The hexagons fill with color when hovered.
2. Border Hexagon Hover: The borders of the hexagons highlight when hovered.
3. Spotlight Hexagon Hover: A spotlight effect focuses on the hovered hexagon.

Features

• Easy-to-use React components.
• Customizable colors and effects.
• Lightweight and responsive design.

Installation

Install the package using npm or yarn:

npm install hexagon-background

or

yarn add hexagon-background

Usage

Wrap your components with the desired hexagon background effect:

Example: Filled Hexagon Hover

import { HexagonHover } from 'hexagon-background';

function App() {
  return (
    <HexagonHover filled>
      <div>Your Content Here</div>
    </HexagonHover>
  );
}

Example: Border Hexagon Hover

import { HexagonHover } from 'hexagon-background';

function App() {
    return (
        <HexagonHover>
            <div>Your Content Here</div>
        </HexagonHover>
    );
}

Example: Spotlight Hexagon Hover

import { HexagonSpotlight } from 'hexagon-background';

function App() {
    return (
        <HexagonSpotlight>
            <div>Your Content Here</div>
        </HexagonSpotlight>
    );
}

Customization

You can customize the colors and sizes of the hexagons by passing props to the components:

<HexagonSpotlight color="#3498db" size={50}>
  <div>Your Content Here</div>
</HexagonSpotlight>

Demo

Check out the live demo on GitHub Pages: Hexagon Background Effects Demo

Contributing

Contributions are welcome! If you find any issues or have suggestions for new features, feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Enjoy creating stunning hexagon backgrounds!