Emma Bostian emmabostian

💻

They see me codin', they hatin'

Front-end Software Engineer @ Spotify

emmabostian / Modal.js

Created January 12, 2020 09:49

emmabostian / Modal.js

Created January 12, 2020 09:49

emmabostian / Modal.js

Created January 12, 2020 09:48

emmabostian / index.js

Created January 12, 2020 09:48

	import React, { useState } from "react";
	import { useTransition } from "react-spring";
	import ReactDOM from "react-dom";
	import Modal from "./Modal";
	import "./styles.css";

	function App() {
	const [modalVisible, setModalVisible] = useState(false);
	const fadingAnimation = useTransition(modalVisible, null, {
	from: { opacity: 0, transform: "translateY(-40px)" },

emmabostian / index.js

Last active January 12, 2020 14:13

<button className="show-modal-button" onClick={() => setModalVisible(true)}>Show modal</button>

emmabostian / index.js

Last active January 12, 2020 14:12

	{fadingAnimation.map( ({ item, key, props: style }) =>
	item && ( <Modal style={style} closeModal={() => setModalVisible(false)} key={key} /> )
	)}

emmabostian / index.js

Created January 12, 2020 09:47

	const fadingAnimation = useTransition(modalVisible, null, {
	from: { opacity: 0, transform: "translateY(-40px)" },
	enter: { opacity: 1, transform: "translateY(0px)" },
	leave: { opacity: 0, transform: "translateY(-40px)" }
	});

emmabostian / index.js

Last active January 12, 2020 09:46

const fadingAnimation = useTransition();

emmabostian / index.js

Created January 12, 2020 09:46

const [modalVisible, setModalVisible] = useState(false);

emmabostian / index.js

Created January 12, 2020 09:45

	import React, { useState } from "react"
	import { useTransition } from "react-spring"
	import Modal from "./Modal";

	function App() {
	return (
	<div className="App">
	<Modal />
	</div>
	);

	import React from "react";
	import { animated } from "react-spring";
	import "./modal.css";

	const Modal = ({ style, closeModal }) => (
	<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

	import React from "react";
	import { animated } from "react-spring";
	import "./modal.css";

	const Modal = ({ style, closeModal }) => (
	<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"> Close </button>
	</div>

	import React from "react";
	import { animated } from "react-spring";
	import "./modal.css";

	const Modal = ({ style, closeModal }) => ( <div>Modal</div> );

	export default Modal;