emmabostian
/ Gallery.js
Created
January 12, 2020 13:37
This file contains hidden or 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
| const transitions = useTransition(index, p => p, { | |
| from: { opacity: 0, transform: "translateX(100%)" }, | |
| enter: { opacity: 1, transform: "translateX(0%)" }, | |
| leave: { opacity: 0, transform: "translateX(-150%)" }, | |
| config: config.slow | |
| }); |
emmabostian
/ Gallery.js
Created
January 12, 2020 13:37
This file contains hidden or 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
| const Gallery = () => { | |
| return ( | |
| <div className="gallery" onClick={onClick}> | |
| </div> | |
| ); | |
| }; | |
| export default Gallery; |
emmabostian
/ Gallery.js
Created
January 12, 2020 13:36
This file contains hidden or 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
| const onClick = useCallback(() => setIndex(state => (state + 1) % 3), []); |
emmabostian
/ Gallery.js
Created
January 12, 2020 13:36
This file contains hidden or 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
| const [index, setIndex] = useState(0); |
emmabostian
/ Gallery.js
Created
January 12, 2020 13:35
This file contains hidden or 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
| const Gallery = () => { | |
| return ( | |
| <div className="gallery"> | |
| </div> | |
| ); | |
| }; | |
| export default Gallery; |
emmabostian
/ Gallery.js
Created
January 12, 2020 13:35
This file contains hidden or 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
| const images = [ | |
| ({ style }) => <animated.img src={mountains} alt="Mountains" style={style} />, | |
| ({ style }) => <animated.img src={beach} alt="Beach" style={style} />, | |
| ({ style }) => <animated.img src={desert} alt="Desert" style={style} /> | |
| ]; |
emmabostian
/ Gallery.js
Created
January 12, 2020 13:34
This file contains hidden or 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
| import React, { useCallback, useState } from "react"; | |
| import { animated, useTransition, config } from "react-spring"; | |
| import mountains from "./images/mountains.jpg"; | |
| import beach from "./images/beach.jpg"; | |
| import desert from "./images/desert.jpg"; | |
| import "./gallery.css"; |
emmabostian
/ gallery.css
Created
January 12, 2020 13:34
This file contains hidden or 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
| .gallery { | |
| background-color: darkslategrey; | |
| width: 100vw; | |
| height: 100vh; | |
| } | |
| .gallery-directions { | |
| background-color: rgba(0, 0, 0, 0.5); | |
| color: #fff; | |
| z-index: 50; |
emmabostian
/ Modal.js
Created
January 12, 2020 09:50
This file contains hidden or 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
| import React from "react"; | |
| import { animated } from "react-spring"; | |
| import "./modal.css"; | |
| const Modal = ({ style, closeModal }) => ( | |
| <animated.div style={style} className="modal"> | |
| <h3 className="modal-title">Modal title</h3> | |
| <p className="modal-content">Here is some random text.</p> | |
| <button className="modal-close-button" onClick={closeModal}> | |
| Close |
emmabostian
/ Modal.js
Created
January 12, 2020 09:50
This file contains hidden or 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
| import React from "react"; | |
| import { animated } from "react-spring"; | |
| import "./modal.css"; | |
| const Modal = ({ style, closeModal }) => ( | |
| <animated.div className="modal"> | |
| <h3 className="modal-title">Modal title</h3> | |
| <p className="modal-content">Here is some random text.</p> | |
| <button className="modal-close-button" onClick={closeModal}> | |
| Close |