React-angler NPM

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 }