augmentor

^{Social Media Photo by Lucrezia Carnelos on Unsplash}

React like hooks for the masses.

Announcement

If you're looking for a less configurable but smaller solution, as in ~0.8K once minified and gzipped, check µhooks out.

V2 Breaking change

Both useState and useReducer are now synchronous by default. If you invoke multiple state changes at once, you can opt into asynchronous execution via the optional argument {async: true}.

This change was made to keep augmentor defaults similar to what developers coming from other hooks based libraries expect.

Available Hooks

• Basic Hooks
  • useState, with optional {async: true, always: true} second parameter to use deferred updates, sync by default, and always call the hook, even if the state is the same, false by default.
  • useEffect
  • useContext, which can be defined via createContext(value)
• Additional Hooks
  • useReducer, with optional {async: true, always: true} third parameter to use deferred updates, sync by default, and always call the hook, even if the state is the same, false by default.
  • useCallback
  • useMemo
  • useRef
  • useLayoutEffect
• Third parts exported utilities
  • hasEffect(augmentedCallback) returns true if augmentedCallback used some effect
  • dropEffect(augmentedCallback) executes any cleanup left from last useEffect(...) invocation

example

You can test this example directly on Code Pen.

import {augmentor, useState} from 'augmentor';

// augment any function once
const a = augmentor(test);
a();

// ... or many times ...
const [b, c] = [test, test].map(augmentor);
b();
c();

function test() {

  const [count, setCount] = useState(0);

  // log current count value
  console.log(count);

  // will invoke this augmented function each second
  setTimeout(() => setCount(count + 1), 1000);
}

F.A.Q.

// WRONG: this is a very bad idea, as any MyComp instance
//        could potentially interfere with other instances
MyComp.prototype.doThings = augmentor(doThings);

// GOOD: this is how you'd do it 👍
class MyComp {
  constructor() {
    const {doThings} = this;
    // augment a bound method/function per each instance
    this.doThings = augmentor(doThings.bind(this));
  }
  doThings() {
    // where actually you do hooky-things
  }
}

import {contextual} from 'augmentor';

const textInjector = contextual(function (text) {
  this.textContent = text;
});

textInjector.call(div, 'hello');
textInjector.call(p, 'there!');