A flexible React component for creating a magnifying glass effect on any content.
Install the package using npm or yarn:
npm i magnify-anything
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;
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. |
Contributions are welcome! Please open an issue or submit a pull request on Github.
For any questions or feedback, please contact [[email protected]].