react-plug

🔥 Small utility library implementing react hooks

Install

yarn add @nobuti/react-plug

Usage

import React from "react";
import ReactDOM from "react-dom";
import {useWindowSize} from "@nobuti/react-plug";
import "./styles.css";
const App = () => {
const size = useWindowSize();
return (
<div className="App">
<h1>Hello React Hooks</h1>
<h2>Resize the window and see its size below</h2>
{size && (
<div>
({size.width}, {size.height})
</div>
)}
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Example

View example in CodeSandbox

useMount

useMount(()=>console.log(`I'm mounted`));

useUnMount

useUnMount(()=>console.log(`I'm going to unmount`));

useWindowSize

constsize=useWindowSize({delay: 50});

Options:

• delay: number of miliseconds to debounce. Default to 100 miliseconds.

useKeypress

constkey=useKeypress({keys: [13,27]});

Options:

• keys: array of key codes you want to catch.

useOnline

constonline=useOnline();

usePageHidden

constpageHidden=usePageHidden();

useScrollPosition

const{x, y}=useScrollPosition();