Magnify Anything 🔎

A flexible React component for creating a magnifying glass effect on any content.

Installation

Install the package using npm or yarn:

npm i magnify-anything

Usage

import React from 'react';
import Magnifier from 'magnify-anything';

const App = () => {
  return (
    <Magnifier previewSize={200} zoom={2} borderColor="blue">
      <div>
        <h1>Hover over me!</h1>
        <p>This is an example of content that can be magnified.</p>
      </div>
    </Magnifier>
  );
};

export default App;

Props

The Magnifier component accepts the following props:

| Prop | Type | Description | |---------------|------------|-----------------------------------------------------| | children | ReactNode| The content to be magnified. | | previewSize | number | The size of the magnifying glass in pixels. | | zoom | number | The zoom level for the magnified content. | | borderColor | string | The border color of the magnifying glass. |

Contributing

Contributions are welcome! Please open an issue or submit a pull request on Github.

Contact

For any questions or feedback, please contact [[email protected]].