@soleilyasmina's React Hooks
This package contains hooks that @soleilyasmina uses frequently.
Table of Contents
Installing
This package can be installed either via NPM or Yarn.
With npm:
npm install @soleilyasmina/hooksWith yarn:
yarn add @soleilyasmina/hooksUsage
These hooks can be implement into any React functional component by importing them from the package:
import { usePrevState, useResize, useToggle } from "@soleilyasmina/hooks";usePrevState
To create a state with an automatically updated previous state, implement usePrevState:
import { usePrevState } from "@soleilyasmina/hooks";
const Counter = () => {
const [count, prevCount, setCount] = usePrevState(0, 0);
return (
<div>
<span>{count}</span>
<span>{prevCount}</span>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
);
};
export default Counter;useResize
To create an effect that runs depending on the window's current size, implement useResize:
import { useState } from "react";
import { useResize } from "@soleilyasmina/hooks";
const Menu = () => {
const [visible, setVisible] = useState(true);
const [hamburger, setHamburger] = useState(false);
useResize(() => {
if (window.innerWidth > 425) {
setVisible(true);
setHamburger(false);
} else {
setVisible(false);
}
});
return (
<header>
<h1>Sitename</h1>
<span style={{ display: visible ? "none" : "inline" }}>+</span>
<nav style={{ display: visible || hamburger ? "flex" : "none" }}>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</nav>
</header>
);
};
export default Menu;useToggle
To create a state with a setter that toggles a boolean, implement useToggle:
import { useToggle } from "@soleilyasmina/hooks";
function DarkModeButton() {
const [darkMode, toggleDarkMode] = useToggle(false);
const style = {
backgroundColor: darkMode ? 'black' : 'white',
color: darkMode ? 'white' : 'black',
}
return (
<div style={style}>
<button onClick={toggleDarkMode}>Toggle Dark Mode</button>
</div>
);
}
export default DarkModeButton;Credits
This package was inspired by useHooks.