전체 글

[React-Hooks] React Hooks - useFullscreen

* useFullscreen useFullscreen은 어떤 요소를 풀스크린으로 보여주는 hooks입니다. import { useRef } from "react"; const useFullscreen = (callback) => { const element = useRef(); const triggerFull = () => { if (element.current) { element.current.requestFullscreen(); if (callback && typeof callback === "function") { callback(true); } } }; const exitFull = () => { document.exitFullscreen(); if (callback && typeof callba..

[React-Hooks] React Hooks - useScroll

* useScroll 스크롤을 해서 무언가를 지나쳤을때 색상을 바꾸거나 어떤 행동을 하는 Hook이다. * useScroll 예시코드 import { useEffect, useState } from "react"; 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", onSc..

[React-Hooks] React Hooks - useFadeIn & useNetwork

* useFadeIn useFadeIn은 어떤 요소를 시간이 지남에 따라 서서히나게 하는 hooks 입니다. * useFadeIn 예시코드 import { useEffect, useRef } from "react"; const useFadeIn = (duration = 1, delay = 0) => { const element = useRef(); useEffect(() => { if (typeof duration === "number" || typeof delay === "number") { if (element.current) { const { current } = element; current.style.transition = `opacity ${duration}s ease-in-out ${dela..

[React-Hooks] React Hooks - useBeforeLeave

* useBeforeLeave 페이지를 벗어날 때 사용자에게 팝업이나 알림을 띄워 줄 수 있는 hook이다 * useBeforeLeave 예시코드 import { useEffect } from "react"; const useBeforeLeave = (onBefore) => { const handle = () => { onBefore(); }; useEffect(() => { if (typeof onBefore === "function") { document.addEventListener("mouseleave", handle); return () => document.removeEventListener("mouseleave", handle); } }, []); }; const App = () => { c..

[React-Hooks] React Hooks - usePreventLeave

* usePreventLeave 어떤 문서작업이나 작업을 할시 sava되지 않았을때 브라우저를 닫으려 할때 되물어 주는 confirm(선택창)을 띄우는 hook입니다. * usePreventLeave 예시 코드 const usePreventLeave = () => { const listener = (event) => { event.preventDefault(); event.returnValue = ""; }; const enablePrevent = () => { window.addEventListener("beforeunload", listener); }; const disablePrevent = () => { window.removeEventListener("beforeunload", listener)..

[React-Hooks] React Hooks - useClick & useHover

* useClick 누군가 element를 클릭하였을 때 함수를 실행시켜준다. * useClick 예시코드 const useClick = (onClick) => { if (typeof onClick !== "function") { return; } const element = useRef(); useEffect(() => { if (element.current) { element.current.addEventListener("click", onClick); } return () => { if (element.current) { element.current.removeEventListener("click", onClick); } } }, []) return typeof onClick !== "functio..