Skip to content

Instantly share code, notes, and snippets.

@andrepcg

andrepcg/GreetingsHooks.js

Last active Oct 28, 2018
Embed
What would you like to do?
import React, { useState, useContext, useEffect } from "react";
import { Card, Row, Input, Text } from "./components";
import ThemeContext from "./ThemeContext";
function Greeting(props) {
let [name, setName] = useState("Harry");
let [surname, setSurname] = useState("Potter");
let theme = useContext(ThemeContext);
useEffect(() => {
document.title = name + " " + sureName;
});
let [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
let handleResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
});
return (
<Card theme={theme}>
<Row label="Name">
<Input value={name} onChange={setName} />
</Row>
<Row label="Surname">
<Input value={surname} onChange={setSurname} />
</Row>
<Row label="Width">
<Text>{width}</Text>
</Row>
</Card>
);
}
export default Greeting;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment