Skip to content
POC to make functional components have a similar API to class components. This by using Hooks to our best use.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
example
src
.editorconfig
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json
tsconfig.json
tslint.json
yarn.lock

README.md

React-angler

npm version Build Status Bundle size codecov

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
You can’t perform that action at this time.