react-angler
v0.3.0
Published
Functional react hooks to solve everyday problems in functional components.
Downloads
11
Readme
React-angler
Personally i love functionally approaching problems, that's why i challenged myself to make this little library. This was a good introduction to TypeScript aswell.
Enjoy!
Installation
yarn
yarn add react-angler
npm
npm i --save react-angler
UMD
dev:
<script src="https://unpkg.com/react-angler@latest/dist/react-angler.umd.js"></script>
prod:
<script src="https://unpkg.com/react-angler@latest/dist/prod/react-angler.umd.js"></script>
The hooks
component-hooks
| name | input | output | |---|---|---| | useActive | / | [ref, isActive] | | useComponentSize | / | [ref, { width, height }] | | useFocus | / | [ref, isFocussed] | | useHover | / | [ref, isHovered] |
Just put the received ref
on a DOMNode and watch the magic happen.
dom-hooks
| name | input | output | |---|---|---| | useTitle | title | / | | useWindowSize | | { width, height} |
useTitle sets the pageTitle in head.
lifecycle-hooks
| name | input | output | |---|---|---| | useDidMount | function | / | | useDidUnmount | function | / | | useDidUpdate | function, arrayOfWatchableProps | / |
useDidUpdate
is good combined with usePreviousValue to see prevProps and current props.
state-hooks
| name | input | output | |---|---|---| | useArray | initialValue | | | useCounter | initialValue | { decrease, increase, setValue, value } | | useInput | initialValue | { clear, setValue, onChange, value } | | useMap | initialValue | { get, getMultiple, remove, set, value } | | useState | initialValue | { setState, state } | | useToggle | initialValue | { toggle, setTrue, setFalse, value } |
inputs here are optional and will default to a reasonable default.
Array-payload
- add: takes an element and adds it.
- clear: gives you a new empty array
- makeUnique: removes duplicate values (by refference)
- remove: given a function that returns a new array
- removeByElement: given an element removes it
- removeByIndex: given an index removes it
- setValue: manually set the array
- value: the array
util-hooks
| name | input | output | |---|---|---| | usePreviousValue | any var | previous value of that var | | useLocalStorage | key, initial | { setValue, value } | | useNetworkStatus | / | currentNetworkStatus |