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.

• State Hooks
  • useStateArray
  • useStateWithDelay
  • useDictionary
  • useVersionedState
• User Interface Hooks
  • useBoundingClientRect
  • useScroll
  • useSyncScroll

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
• pop() => Any
  • removes last item in state and returns it
• shift() => Any
  • removes first item in state and returns it
• unshift(value) => Any
  • adds item at the start of the state
• replace(array: Array<Any>?) => Void
  • replaces state with array
• clear() => Void
  • clears array
• last() => Any
  • returns last item
• first() => Any
  • returns first item

Go to code

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

Go to code

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 calls update
• unset(key: String) => Void
  • removes item with given key if it exists
• update(key: String, value: Any?) => Void
  • updates item if it exists with given key with given value
• get(key: String) => Any?
  • returns item.value if it exists in dictionary
• has(key: String) => Boolean
  • returns true if key is in dictionary
• 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

Go to code

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

Go to code

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]

Go to code

Hook that returns values for scrollLeft and scrollTop of the element with given ref

function useScroll(ref: React.MutableRefObject) : Object<x: Number, y: Number>

Go to code

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

Go to code