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

const size = useWindowSize({delay: 50});

Options:

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

useKeypress

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

Options:

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

useOnline

const online = useOnline();

usePageHidden

const pageHidden = usePageHidden();

useScrollPosition

const {x, y} = useScrollPosition();