React Hooks (3)

- useScroll

· 때때로 유저가 스크롤 해서 무언갈 지나쳤을 때 색상을 바꾸거나 무엇이든지 할 필요가 있음

 

import React, { useEffect, useState, useRef } from "react";

import ReactDOM from "react-dom";

 

const useScroll = () => {

const [state, setState] = useState({

x: 0,

y: 0

});

const onScroll = () => {

setState({y: window.scrollY, x: window.scrollX});

};

useEffect(() => {

window.addEventListener("scroll", onScroll);

return () => window.removeEventListener("scroll",onScroll);

}, [])

return state;

};

 

const App = () => {

const {y}=useScroll();

return (

<div className="App" style={{height: "1000vh"}}>

<h1 style={{position: "fixed", color: y>100? "red" : "blue"}}>Hi</h1>

</div>

);

};

 

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

 

- useFullScreen

· 어떤 element를 얻으면 fullscreen으로 만들어줌

 

import React, { useEffect, useState, useRef } from "react";

import ReactDOM from "react-dom";

 

const useFullscreen = callback => {

const element = useRef();

const runCb = isFull => {

if (callback && typeof callback === "function") {

callback(isFull);

}

};

const triggerFull = () => { // full화면으로 변환하는 함수

if (element.current) {

if (element.current.requestFullscreen) { // chrome, safari

element.current.requestFullscreen();

} else if (element.current.mozRequestFullScreen) { // firefox

element.current.mozRequestFullScreen();

} else if (element.current.webkitRequestFullscreen) { // opera

element.current.webkitRequestFullscreen();

} else if (element.current.msRequestFullscreen) { // microsoft

element.current.msRequestFullscreen();

}

runCb(true);

}

};

const exitFull = () => { // full화면을 해제하는 함수

document.exitFullscreen();

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.webkitExitFullscreen) {

document.webkitExitFullscreen();

} else if (document.msExitFullscreen) {

document.msExitFullscreen();

}

runCb(false);

};

return { element, triggerFull, exitFull };

};

 

const App = () => {

const onFullS = isFull => { // callback 함수

console.log(isFull ? "Full" : "Small");

};

const { element, triggerFull, exitFull } = useFullscreen(onFullS);

return (

<div className="App">

<h1>Hello</h1>

<div ref={element}>

<img src="https://hjban-dev.github.io/public/logo.png"/>

<button onClick={exitFull}>exitFull</button>

<button onClick={triggerFull}>triggerFull</button>

</div>

</div>

);

};

 

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

 

- useNotification

import React, { useEffect, useState, useRef } from "react";

import ReactDOM from "react-dom";

 

const useNotification = (title, options) => {

if (!("Notificaition" in window)) {

return;

}

const fireNotif = () => {

if (Notification.permission !== "granted") {

Notification.requestPermission().then((permission) => {

if (permission === "granted") {

new Notification(title, options);

} else {

return;

}

});

} else {

new Notification(title, options);

}

};

return fireNotif;

};

 

const App = () => {

const triggerNotif = useNotification("Can I steel your kimch?",

{body: "I love kimch dont you"});

return (

<div className="App">

<button onClick={triggerNotif}>Hello</button>

</div>

);

};

 

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);