neat-hooks
is a lightweight package that contains a few hooks that I find very useful to have in my projects. Some of these will be useful throughout your whole project, others are more niche.
These hooks are inherent to the state of your component / application. They provide a friendly interface to handle complex state management while keeping their usage simple and clear.
This simple hook provides an interface to handle the state as an array.
function useStateArray(initialState: Array<Any> | Any) : [state: Array<Any>, handlers: Object<Function>]
Available handlers:
push(item: Any) => Void
- pushes
item
in state
- pushes
pop() => Any
- removes last
item
in state and returns it
- removes last
shift() => Any
- removes first
item
in state and returns it
- removes first
unshift(value) => Any
- adds
item
at the start of the state
- adds
replace(array: Array<Any>?) => Void
- replaces state with array
clear() => Void
- clears array
last() => Any
- returns last
item
- returns last
first() => Any
- returns first
item
- returns first
Custom hook that changes the setState function by adding an optional delay
function useStateWithDelay(initialState: Any? = null) : [state: Any?, setState: Function]
Available handlers:
setState(value: Any?, delay: Number = 0) => Void
- sets a new state value with an added delay in ms
Hook that treats state as a [key, value] map
function useDictionary(initialState: Object = {}) : [dictionary: Object<[Key, Value]>, handlers: Object<Function>]
Available handlers:
set(key: String, value: Any?) => Void
- sets
item
if it doesn't exists in dictionary else it callsupdate
- sets
unset(key: String) => Void
- removes
item
with givenkey
if it exists
- removes
update(key: String, value: Any?) => Void
- updates
item
if it exists with givenkey
with givenvalue
- updates
get(key: String) => Any?
- returns
item.value
if it exists in dictionary
- returns
has(key: String) => Boolean
- returns
true
if key is in dictionary
- returns
size() => Number
- returns the size of the dictionary
keys() => Array<String>
- returns the keys of the dictionary
values() => Array<Any>
- returns the values of the dictionary
Hook that creates an history of all state changes saved by hash code
function useVersionedState(initialState: Any) : [currentState: Any, setState: Funcion, handlers: Object<Function>]
Available handlers:
setState(value: Any?) => Void
- sets a new state
getVersion(hash: String) => Object<hash: String, state: Any>
- returns the state saved with given hash code
getCurrent() => Object<hash: String, state: Any>
- returns current state
rollback(hash: String) => Void
- sets current state to state with given hash
getHashList() => Array<String>
- returns list of all hash codes
Set of hooks to aid in user interface related problems and possible hiccups.
Hook that returns the value of getBoundingClientRect
on the element that has the ref returned by this function
function useBoundingClientRect() : [boundingClientRect: Object, ref: React.MutableRefObject]
Hook that returns values for scrollLeft and scrollTop of the element with given ref
function useScroll(ref: React.MutableRefObject) : Object<x: Number, y: Number>
Hook that syncs scroll between container and target, uses useScroll
, returns ref to target element
function useSyncScroll(ref: React.MutableRefObject, axis: String = null) : React.MutableRefObject