react hooks

master
Tudor Stanciu 2022-09-07 11:24:20 +03:00
parent 3095e8fb0d
commit 0a89a76b8a
6 changed files with 3291 additions and 3 deletions

View File

@ -13,7 +13,7 @@ yarn add @flare/react-hooks --registry https://toodle.ddns.net/public-node-regis
## Usage
```jsx
import { StandardCV } from "@flare/react-hooks";
import { useWindowSize, useLink, useTitle } from "@flare/react-hooks";
```
**1.0.0**

3202
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

17
src/hooks/useLink.js Normal file
View File

@ -0,0 +1,17 @@
import { useEffect } from "react";
const useLink = (href, rel) => {
useEffect(() => {
const link = document.createElement("link");
link.href = href;
link.rel = rel;
document.head.appendChild(link);
return () => {
document.head.removeChild(link);
};
}, [href, rel]);
};
export default useLink;

13
src/hooks/useTitle.js Normal file
View File

@ -0,0 +1,13 @@
import { useEffect } from "react";
const useTitle = title => {
useEffect(() => {
const prevTitle = document.title;
document.title = title;
return () => {
document.title = prevTitle;
};
}, [title]);
};
export default useTitle;

View File

@ -0,0 +1,53 @@
import { useState, useEffect } from "react";
const screenSizeLimit = {
mobile: 768,
tablet: 992
};
const useWindowSize = () => {
const [windowSize, setWindowSize] = useState({
width: undefined,
height: undefined
});
useEffect(() => {
// Handler to call on window resize
function handleResize() {
// Set window width/height to state
setWindowSize({
width: window.innerWidth,
height: window.innerHeight
});
}
// Add event listener
window.addEventListener("resize", handleResize);
// Call handler right away so state gets updated with initial window size
handleResize();
// Remove event listener on cleanup
return () => window.removeEventListener("resize", handleResize);
}, []); // Empty array ensures that effect is only run on mount
const isMobile = windowSize.width < screenSizeLimit.mobile;
const isTablet =
windowSize.width >= screenSizeLimit.mobile &&
windowSize.width < screenSizeLimit.tablet;
const isDesktop = windowSize.width >= screenSizeLimit.tablet;
return {
windowSize,
isMobile,
isTablet,
isDesktop
};
};
export default useWindowSize;
/* Test it:
<div>
{windowSize.width}px / {windowSize.height}px
</div>
*/

View File

@ -1,2 +1,5 @@
const empty = "";
export { empty };
import useWindowSize from "./hooks/useWindowSize";
import useLink from "./hooks/useLink";
import useTitle from "./hooks/useTitle";
export { useWindowSize, useLink, useTitle };