react-magnify: Magnifying glass for image zoom using ReactJS | SodhanaLibrary

react-magnify: Magnifying glass for image zoom using ReactJS

Sunday, 19 March 2017 | Posted by Unknown

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

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:ReactJS

9 comments:

Anonymous29 December 2017 at 09:43
I have the same on my web site essayup.com where I taste different features.
ReplyDelete
Replies
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
Replies
Houlland12 September 2018 at 18:46
This comment has been removed by the author.
ReplyDelete
Replies
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
Replies
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
Replies
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
Replies
افضل شركات 17 May 2020 at 05:35
شركة تعقيم بالمدينه المنورة

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

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

شركة تعقيم بمكة
ReplyDelete
Replies
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
Replies
Unknown11 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
Replies

Subscribe to: Post Comments (Atom)