@anissoft/react-hooks

React Hooks

Bunch of hooks for React

Installation

Just run npm install command:

$ npm install @anissoft/react-hooks

React lifecycle

- useMounted()

Shortway for 'didMount' property

import React from "react";
import { If } from "@anissoft/react-conditions";
import useMounted from "@anissoft/react-hooks";

export default () => {
  const { mounted } = useMounted();

  return (
    <div>{!mounted ? <p>Component is rendering first time</p> : <p>Component was rendered before</p>}</div>
  );
};

useMounted also returns function, that allows you to check if component still mounted and prevent memory leak

export default () => {
  const { isMounted } = useMounted();
  const [state, setState] = React.useState(0);

  React.useEffect(() => {
    fetch("/some/api").then((res) => {
      if (isMounted()) {
        setState(res.ok);
      }
    });
  }, []);

  return <div>💣</div>;
};

Browser api and events

- useQueryParameter(parameterName [, defaultValue]) and useQueryParameters()

Allows to use querystring parameter from url as State in your component. This hook doesn't require react-router or any other packages for routing

import React from "react";
import { useQueryParameter, useQueryParameters } from "@anissoft/react-hooks";

export const Example = ({ selectedPage }) => {
  const [test, setTest] = useQueryParameter("test", "default-value");
  // if parameter ?test= doesn't present in url, it will be added with provided default value
  // otherwise, default value will be ignored, and current one will be in use

  React.useEffect(() => {
    // parameter changes in url will lead to component update
    console.log(`Parameter 'test' was changed to ${test}`);
  }, [test]);

  const [page, setPage] = useQueryParameter("page");
  // if parameter ?page= doesn't present in url, and no default value provided
  // page will be equals ''

  React.useEffect(() => {
    if (page !== selectedPage) {
      setPage(selectedPage);
    }
  }, [selectedPage]);

  // ...
};

export const Example2 = ({ selectedPage }) => {
  const [params, updateParam] = useQueryParameters();

  React.useEffect(() => {
    // parameter changes in url will lead to component update
    console.log(`Some parameters changed`, params);
  }, [params]);

  const onClick = () => {
    updateParam("clicked", "true");
  };

  // ...
};

pass null as value, to remove parameter from url

const [test, setTest] = useQueryParameter("test", "default-value");
const [params, setParam] = useQueryParameters();

setTest(null);
setParam("test", null);

you can pass second argument in setState action

const [test, setTest] = useQueryParameter("test", "default-value");
const [params, setParam] = useQueryParameters();

setTest("value", "push"); //updates url with pushState
setParam("test", "value", "push");

setTest("value", "replace"); //[default] updates url with replaceState
setParam("test", "value", "replace");

- useDocumentCookie(name [,defaultValue [,defaultOptions]]) and useDocumentCookies()

Allows to use document cookies as react state

import React from "react";
import { useDocumentCookies, useDocumentCookie} from "@anissoft/react-hooks";

function Example() {
  const [cookies, setCookie] = useDocumentCookies();
  const [testCoookie, updateTestCookie] = useDocumentCookie("test", "default-value");

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <pre>{JSON.stringify(cookies)}</pre>
      <button
        onClick={() => {
          setCookie("name", "value");
          updateTestCoookie("new-value");
        }}
      />
    </div>
  );
}

pass null as value, to delete cookie

const [testCoookie, updateTestCookie] = useDocumentCookie("test");
const [cookies, setCookie] = useDocumentCookies();

updateTestCookie(null);
setCookie("name", null);

- useTabFocus({ onBlur, onFocus } [, deps])

Will subscribe corresponding callbacks for onblur and onfocus window events (eg. if user switched tab)

import React from "react";
import { useTabFocus } from "@anissoft/react-hooks";

const Example = () => {
  useTabFocus(
    {
      onBlur: () => {
        console.log("User has left tab");
      },
      onFocus: () => {
        console.log("User opened tab back");
      },
    },
    []
  );
  // ...
};

- useKeyboard(callback [, deps])

Will execute callback on keydown events with all pressed keys and keycodes at this moment

import React from 'react';
import { useKeyboard } from '@anissoft/react-hooks';

const Example = () => {
  const [pressedKeys, setPressedKeys] = React.useState<string[]>([]);
  const [pressedAmount, setPressedAMount] = React.useState<number>(0);

  useKeyboard((keys, amount) => {
    setPressedKeys(keys);
    setPressedAMount(amount)
  }, []);

  return (
    <div>
      <p>Total key pressed: {pressedAmount}</p>
      <ul>
      {pressedKeys.map(key => <li>{key}</li>)}
      </ul>
    </div>
  )
}

React state managemenet

- useLocalStorage(key [,defaultState]) and useSessionStorage(key [,defaultState])

Just like regular React.useState(), but will also sync state with corresponsing value in localStorage or sessionStorage. When value in storage will be changed somewere else in application - component will also update it's state;

import React from "react";
import { useLocalStorage } from "@anissoft/react-hooks";

const Example = () => {
  const [value, setValue] = useLocalStorage("key");

  return <input value={value} onChange={(event) => setValue(event.target.value)} />;
};

You can also specify the default value:

const Example = () => {
  const [value, setValue] = useSessionStorage("key", "default string");

  React.useEffect(() => {
    console.log(sessionStorage.getItem("key") === "default string"); // true
  }, []);

  // ...
};

- useSharedState(key [,defaultState])

Allows you to access state and setState method with this hook in any place at your application by uniq stateId

import React from "react";
import { useSharedState, SharedStateProvider } from "@anissoft/react-hooks";

import { globalStateKey, globalDefaultState } from "./stateKeys";

const Parent = () => {
  const [state, setState] = useSharedState(globalStateKey, globalDefaultState);

  return (
    <SharedStateProvider>
      // ...
      <DeepChild />
      // ...
    </SharedStateProvider>
  );
};

const DeepChild = () => {
  const [state, setState] = useSharedState(globalStateKey, globalDefaultState);

  // ...
};

- useSet(initialValue)

Returns instance of Set, witch triggers component update on its changes (.add, .delete and .clear methods)

import React from 'react'
import { useSet } from '@anissoft/react-hooks'

const Example = () => {
  const numbers = useSet([1,2,3]);
  const add4 = () => number.add(4); // invokes rerender only once, since next time "4" will be already in Set

  return (
    <>
    <span>total numbers - {numbers.size}</span>
    <button onClick={add4}>add number 4</button>
    <ul>
      {[...numbers].map(number => <li>{number}</li>);}
    </ul>
    </>
  )
};

- useDebouncedState(value, delay)

Debounce the [value] for [delay] (in ms)

import React from "react";
import { useDebouncedState } from "@anissoft/react-hooks";

const Example = ({ initial }) => {
  const [value, setValue] = useState(initial);
  const [debouncedValue, setDebouncedValue] = useDebouncedState(initial, 300);

  const handleChange = (e) => {
    setValue(e.target.value);
    setDebouncedValue(e.target.value);
  };

  return (
    <div>
      <input onChange={handleChange} />
      <p>Value: {value}</p>
      <p>DebouncedValue: {debouncedValue}</p>
    </div>
  );
};

- useThrottledState(value, delay)

Throttle the [value] for [delay] (in ms)

import React from "react";
import { useThrottledState } from "@anissoft/react-hooks";

export default ({ initial }) => {
  const [value, setValue] = useState(initial);
  const [throttledValue, setThrottledValue] = useThrottledState(initial, 300);

  const handleChange = (e) => {
    setValue(e.target.value);
    setThrottledValue(e.target.value);
  };

  return (
    <div>
      <input onChange={handleChange} />
      <p>Value: {value}</p>
      <p>ThrottledValue: {throttledValue}</p>
    </div>
  );
};