React Hooks

Bunch of hooks for React

Installation

Just run npm install command:

``bash
$ npm install @anissoft/react-hooks
`

React lifecycle

$3

Shortway for 'didMount' property

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

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

return (


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

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

return

`js
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

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

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

you can pass second argument in _setState_ action

`js
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");
`

$3

Allows to use document cookies as react state

`js
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 (


{JSON.stringify(cookies)}

pass null as value, to delete cookie

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

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

$3

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

`js
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");
},
},
[]
);
// ...
};
`

$3

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

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

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

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

return (


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

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

return setValue(event.target.value)} />;
};
`

You can also specify the default value:

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

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

// ...
};
`

$3

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

`js
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 (

// ...

// ...

);
};

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

// ...
};
`

$3

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

`js
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 (
<>
total numbers - {numbers.size}
add number 4


{[...numbers].map(number =>
• {number}
);}

`js
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 (


`js
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 (