@anissoft/react-hooks
v1.3.7
Published
Bunch of react hooks
Downloads
28
Readme
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>
);
};