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:

38 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
  7. افضل شركات 17 May 2020 at 05:35

    شركة تعقيم بالمدينه المنورة

    شركة تعقيم بالطائف

    شركة تعقيم بجدة

    شركة تعقيم بمكة

    ReplyDelete
  8. buyalldocument3 July 2020 at 13:48

    Buy Real Passport Online, Buy Fake Passport Online

    Buy Real Passport Online, Buy Fake Passport Online, Buy Real Documents online, Passport for Sale online, Buy IELTS Certificate online, Drivers license for sale online, Buy Fake ID Cards online, buy documents Online
    For more details you can visit our website: https://buyalldocument.com/ OR WhatsApp: +1(443) 351-8162 OR Email us at buyrealfake.documents@yandex.com

    ReplyDelete
  9. sheroz11 August 2020 at 00:47

    Wow! Such an amazing and helpful post this is. I really really love it.
    I hope that you continue to do your work like this in the future also.thanks for sharing a lot
    pak private tutor

    ReplyDelete
  10. riya29 August 2020 at 09:55

    SUPER ARTICLE
    internship in chennai for mechanical engineering
    internship in chennai for mba finance
    internship in bmw chennai
    internship jobs in chennai
    internship in chennai for civil engineering students
    internship in chennai for mba hr
    internship in chennai for eee students
    internship for biotechnology in chennai
    internship in chennai for bba students
    internship in chennai for engineering students

    ReplyDelete
  11. papa1 September 2020 at 04:01

    HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page.

    internship in chennai for mechanical
    internship in chennai for cse students
    internship in chennai for eee
    internship in chennai for ece students
    internship in chennai for bcom students
    internship in chennai for mechanical engineering students
    python internship in chennai
    internship in chennai for it students
    companies offering internship in chennai
    internship in chennai for it

    ReplyDelete
  12. awesomepic4u2 September 2020 at 08:32

    I must thank you for the efforts you have put in writing this blog. I am hoping to check out the same high-grade content by you in the future as well.
    I was very pleased to uncover this website. I want to to thank you for your time for this fantastic read!! I definitely savored every little bit of it and i also have you saved as a favorite to see new things in your site.

    No more waste time to searching #HDimages, #PCwallpaper, #smartphone_wallpaper, #socialmedia_banner, #socialmedia_image_post, #natureHDimages, and many more awesome pictures. Just visit All Awesome Pictures Only For Love Hearts and choose your best choice.
    All Awesome Pictures Only For Love Hearts
    All Awesome Pictures Only For Love Hearts
    All Awesome Pictures Only For Love Hearts

    ReplyDelete
  13. invincible015 September 2020 at 08:29

    Amazing Article,really useful more information on the topic so you will be share more information to be check and share here.

    internship in chennai for mechanical
    internship in chennai for cse students
    internship in chennai for eee
    internship in chennai for ece students
    internship in chennai for bcom students
    internship in chennai for mechanical engineering students
    python internship in chennai
    internship in chennai for it students
    companies offering internship in chennai
    internship in chennai for it

    ReplyDelete
  14. riya30 September 2020 at 08:53

    Super article

    What is Cyber Security
    Types of Cyber Attacks
    Types of Cyber Attackers
    Cyber Security Technology
    Cyber Security Tools
    Cyber Security Standards
    What is Google Adwords
    Google Adwords tutorial
    Google Keyword Planner
    How to Advertise on Google

    ReplyDelete
  15. Sales Fundaa3 October 2020 at 00:21

    Helpful InformationCRM Software in Mumbai

    ReplyDelete
  16. DPBOSS17 October 2020 at 03:05

    You're doing not got the chance to be constrained to stress or run from here to there. You'll have the option to check the outcomes basically just by going with a tick. These outcomes square measure offered at the official site which we bestow Fix SattaMatka Numbers Satta fix jodi.
    You can even have live updates. Have speediest SattaMatka Results essentially on your portable. You'll have the option to try and have refreshes for Madhur Matka, City Matka, RajdhaniMatka, Time Bazar, city Mail just while not exertion any very problems. This recognized stage is here to frame you have the sole aptitude.

    ReplyDelete
  17. sh3boo osama26 October 2020 at 13:57


    Our company is the strongest and best company specialized in cleaning the compound, and it is worth noting that the company has many branches throughout the Kingdom, and the company uses many distinctive technologies and methods.
    شركة تنظيف فلل ببريدة

    شركة تنظيف خزانات ببريدة

    شركة رش مبيدات ببريدة

    شركة تسليك مجاري ببريدة

    شركة عزل أسطح ببريدة

    ReplyDelete
  18. Six sigma certification 4 November 2020 at 02:24

    Amazing information

    Get Six Sigma Certification In Delhi with HenryHarvin.
    Learn from experts and be on top.

    ReplyDelete
  19. Six sigma certification 4 November 2020 at 02:24

    Well written article, loved it!
    Get Lean Six Sigma Green Belt Certification with HenryHarvin.
    Learn from experts and be on top

    ReplyDelete
  20. Six sigma certification 4 November 2020 at 02:24

    Thank you for this informative post

    Get Six Sigma Certification Online with HenryHarvin.
    Learn from experts and be on top

    ReplyDelete
  21. Unknown10 November 2020 at 23:25

    Thank you for this informative post

    Get Six Sigma Certification Online with HenryHarvin.
    Learn from experts and be on top

    ReplyDelete
  22. Abduljabbar Ramadhan Ali5 December 2020 at 22:51

    This is the right place for me to learn some coding... I really love how you explain everything in details

    ReplyDelete
  23. Hania OCS7 December 2020 at 00:47

    ERP Gold Software
    How ERP Gold works as an inventory management software for Walmart
    Why do sellers on Walmart need inventory management software?
    Inventory management involves the process of ordering, handling, storing, and processing a company’s inventory. This has done because, without an effective inventory management system, the full potential of the supply chain becomes unattainable.
    For more information about ERP Gold inventory management software, please click on the link below.
    https://www.erp.gold/walmart-erp-integration-software/

    ReplyDelete
  24. Online Shoping9 December 2020 at 07:04

    This page contains the necessary information I have a enjoyable site if you feel free you can visit my site Yespornplease

    ReplyDelete
  25. manglik9 December 2020 at 07:35

    Manglik Matrimony
    Most Trusted Manglik Matrimonial Site For Hindu, Punjabi, Marathi, Tamil & Bengali Marriage. 100% Verified Profiles. Contact Profiles Directly & Get Married Soon. Manglik Matrimony - JOIN FREE - https://www.mangliks.com/register.php

    ReplyDelete
  26. Learn for earn13 December 2020 at 06:47

    This page contains the necessary information The Samsung Galaxy M52 is going to be published very soon if you feel free you can visit my site Samsung M52 Release Date

    ReplyDelete
  27. CareerVictor15 December 2020 at 01:23

    CareerVictor is a platform where you will get the details about different kinds of Skills, Talents, Hobbies & Opportunities.

    ReplyDelete
  28. mimzinternational16 December 2020 at 01:06

    Thank you for sharing your info. I really appreciate your efforts and I am waiting for your further write ups thank you once again. And know Mimz International Merchandising Company provides services to clients to Make their Vision a Reality and to help companies to improve business performance. merchandising

    ReplyDelete
  29. Test Çöz20 December 2020 at 02:58

    Gravel Bisiklet
    Tüm dünyada artan bir trend olan ve 2020 yılına kesinlikle damgasını vuran Gravel bisiklet, insanoğlunun keşif duygusu ile bisikletin sunduğu fırsatları birleştirmesinden dolayı çok fazla tutulur oldu.Bir Gravel (Çakıl) bisikletin

    ReplyDelete
  30. MTTMT30 December 2020 at 22:29

    Your posts are always informative. This post was a very interesting topic for me too. 토토사이트 I wish I could visit the site I run and exchange opinions with each other. So have a nice day.

    ReplyDelete
  31. ilander vijay7 January 2021 at 23:51

    Nice informative post.Electrical system design

    this is for wonderful sharing Electrical design for building construction

    ReplyDelete
  32. ilander vijay9 January 2021 at 01:08

    Thanks so much for sharing this awesome details. Retail Electricity Supplier

    ReplyDelete
  33. Unknown11 January 2021 at 02:25

    sharing Electrical design for building construction
    Commercial construction service

    ReplyDelete
  34. sheroz11 January 2021 at 04:05

    Thanks so much for sharing

    best Psychological services in lahore

    ReplyDelete
  35. sheroz15 January 2021 at 03:30

    thanks
    Best Construction Company in Lahore

    ReplyDelete
  36. aditya18 January 2021 at 00:29


    I always appreciated your work, your creation is definitely unique. Great job

    apk editor pro|kahoot hack|www.myaarpmedicare.com|

    ReplyDelete

Subscribe to: Post Comments (Atom)

Blogroll

Follow this blog by Email

Popular Posts