@walkerrandolphsmith/react-loupe

React component to turn ordinary images into images with magnifyer glass overlay.

Usage no npm install needed!

<script type="module">
  import walkerrandolphsmithReactLoupe from 'https://cdn.skypack.dev/@walkerrandolphsmith/react-loupe';
</script>

README

React-Loupe :mag:

React component to turn ordinary images into images with magnifyer glass overlay.

Install

npm install @walkerandolphsmith/react-loupe

Usage

  1. Default
<Loupe image={'url'}></Loupe>
  1. Override image styles
<Loupe image={'url'} styles={{ border: '1px solid green' }}></Loupe>
  1. Override loupe styles
<Loupe image={'url'} loupeStyles={{ border: '1px solid green', borderRadius: '50%' }}></Loupe>

Development

Build

npm run build

Open storybook

npm start