-
Notifications
You must be signed in to change notification settings - Fork 165
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(react): update example to React hooks
- Loading branch information
1 parent
f6b87ab
commit f8ba6c2
Showing
6 changed files
with
1,608 additions
and
661 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,55 +1,49 @@ | ||
import React, { Component } from 'react' | ||
import React from 'react' | ||
import mediumZoom from 'medium-zoom' | ||
import Image from './Image' | ||
|
||
class App extends Component { | ||
zoom = mediumZoom() | ||
|
||
attachZoom = image => { | ||
this.zoom.attach(image) | ||
} | ||
|
||
render() { | ||
return ( | ||
<article className="container"> | ||
<h1>React demo</h1> | ||
|
||
<Image | ||
src="images/image-1.jpg" | ||
alt="Zoom 1" | ||
zoom={this.zoom} | ||
background="#000" | ||
/> | ||
|
||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora | ||
praesentium cupiditate fugit voluptas, rem eligendi, voluptatem | ||
molestias. Doloremque sit voluptatum odio maiores provident | ||
consequuntur accusantium saepe. | ||
</p> | ||
|
||
<Image | ||
src="images/image-2.jpg" | ||
alt="Zoom 2" | ||
zoom={this.zoom} | ||
background="red" | ||
/> | ||
|
||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores | ||
quaerat, quis modi nostrum sequi adipisci ratione esse blanditiis | ||
error beatae vel non vero dolor nemo. Animi nemo quisquam ducimus! | ||
</p> | ||
|
||
<Image | ||
src="images/image-3.jpg" | ||
alt="Zoom 3" | ||
zoom={this.zoom} | ||
background="yellow" | ||
/> | ||
</article> | ||
) | ||
} | ||
import ImageZoom from './ImageZoom' | ||
|
||
function App() { | ||
const zoom = React.useRef(mediumZoom()) | ||
|
||
return ( | ||
<article className="container"> | ||
<h1>React demo</h1> | ||
|
||
<ImageZoom | ||
src="images/image-1.jpg" | ||
alt="Zoom 1" | ||
zoom={zoom.current} | ||
background="#000" | ||
/> | ||
|
||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora | ||
praesentium cupiditate fugit voluptas, rem eligendi, voluptatem | ||
molestias. Doloremque sit voluptatum odio maiores provident consequuntur | ||
accusantium saepe. | ||
</p> | ||
|
||
<ImageZoom | ||
src="images/image-2.jpg" | ||
alt="Zoom 2" | ||
zoom={zoom.current} | ||
background="red" | ||
/> | ||
|
||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores | ||
quaerat, quis modi nostrum sequi adipisci ratione esse blanditiis error | ||
beatae vel non vero dolor nemo. Animi nemo quisquam ducimus! | ||
</p> | ||
|
||
<ImageZoom | ||
src="images/image-3.jpg" | ||
alt="Zoom 3" | ||
zoom={zoom.current} | ||
background="yellow" | ||
/> | ||
</article> | ||
) | ||
} | ||
|
||
export default App |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import React from 'react' | ||
|
||
function ImageZoom({ zoom, src, alt, background }) { | ||
const zoomRef = React.useRef(zoom.clone({ background })) | ||
|
||
function attachZoom(image) { | ||
zoomRef.current.attach(image) | ||
} | ||
|
||
return <img src={src} alt={alt} ref={attachZoom} /> | ||
} | ||
|
||
export default ImageZoom |
Oops, something went wrong.