react-magnify: Magnifying glass for image zoom using ReactJS

Sunday, 19 March 2017 | Posted by
This React library allows you to enlarge part of an image with a CSS3 based magnifying glass effect. When user mouse over on the image, it will show original enlarged image in magnifying glass. 
react-tweet-parser source on Github       DEMO

Install react-magnify

npm install react-magnify --save

Import Magnify

import Magnify from 'react-magnify';

Properties

It supports all image properties. src property is mandatory property 
  1. src - source of the image

Usage

Use Magnify component like below
<Magnify style={{
          width:'200px'
        }} src="http://thecodeplayer.com/uploads/media/iphone.jpg"></Magnify

Full Example 

Find below for full example
import React from 'react';
import Magnify from 'react-magnify';
import '../../node_modules/react-magnify/lib/react-magnify.css'

export default class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div style={{
        width:'500px',
        margin:'auto'
      }}>
        <h1>It Works with react-magnify</h1>
        <Magnify style={{
          width:'200px'
        }} src="http://thecodeplayer.com/uploads/media/iphone.jpg"></Magnify>
      </div>
    )
  }
}
Labels:

6 comments:

  1. Anonymous29 December 2017 at 09:43

    I have the same on my web site essayup.com where I taste different features.

    ReplyDelete
  2. anna26 July 2018 at 11:50

    I have read very important grab my essay review topics about the client resources. They are issued many updates on your work place for innovations. so we are given this article to reviews in online and thankful to have the great services.

    ReplyDelete
  3. Houlland12 September 2018 at 18:46

    This comment has been removed by the author.

    ReplyDelete
  4. FLIP DIVING15 November 2018 at 22:59

    The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface.
    webnovel

    ReplyDelete
  5. Merlin Kristianti30 June 2019 at 13:52

    Buat yang tengah mencari mencari panduan serta taktik dalam memperolah kemenangan bermain judi online, berikut ini akan kami terangkan
    asikqq
    dewaqq
    sumoqq
    interqq
    pionpoker
    bandar ceme terpercaya
    hobiqq
    paito warna
    forum prediksi

    ReplyDelete
  6. sara16 July 2019 at 03:08

    APK Editor is an efficient tool that can edit/hack apk files to do a lot of tasks.
    https://apkeditor.org
    APK Editor
    APK Editor APK
    apk editor apps
    apk editor for windows
    apk editor pro download

    ReplyDelete

Subscribe to: Post Comments (Atom)

Blogroll

Follow this blog by Email

Popular Posts