Bunch of react hooks
npm install @anissoft/react-hooksBunch of hooks for React
Just run npm install command:
``bash`
$ npm install @anissoft/react-hooks
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 (
Component is rendering first time
:Component was rendered before
}useMounted also returns function, that allows you to check if component still mounted and prevent memory leak
`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
💣;
};
`Browser api and events
$3
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
`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)}
onClick={() => {
setCookie("name", "value");
updateTestCoookie("new-value");
}}
/>
);
}
`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 (
Total key pressed: {pressedAmount}
{pressedKeys.map(key => - {key}
)}
)
}
`React state managemenet
$3
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;
`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}
{[...numbers].map(number => - {number}
);}
>
)
};
`$3
Debounce the [value] for [delay] (in ms)
`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 (
Value: {value}
DebouncedValue: {debouncedValue}
);
};
`$3
Throttle the [value] for [delay] (in ms)
`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 (
Value: {value}
ThrottledValue: {throttledValue}
);
};
``