nofux

Unpredictable state container for JavaScript apps. Rethinking best practices, when you're all out of fucks to give.

Install

npm install --save nofux

We publish CommonJS, ES2015, ESM, and UMD builds. We also include a TypeScript definition file.

UMD

We publish a UMD build inside our npm package. You can use it via the unpkg CDN:

https://unpkg.com/nofux@latest/dist/umd/nofux.min.js

Usage

Try reading the source code!

The central idea of nofux is that all of your application's state is contained in a single, global atom. This state tree is held on the nofux namespace, which is actually an alias to the global object in your JavaScript environment, e.g. window.

To update the state, simply assign a property on nofux! That's it! ...Unless you want your app to update too, in which you need to call this.forceUpdate() on your component.

JSBin Demo

import nofux from 'nofux';
// or
const nofux = window;
 
class Search extends React.Component {
  render() {
    return (
      <div>
        <input
          placeholder="Search..."
          value={nofux.search || ''}
          onChange={event => {
            nofux.search = event.target.value;
            this.forceUpdate();
          }}
        />
        <p>You have typed: {nofux.search || '(nothing yet)'}</p>
      </div>
    );
  }
}

No boilerplate, no fancy bindings or actions to dispatch. Truly global state!

Discuss

Everyone is welcome on our Gitter channel!

Credit

I was inspired by this video: https://www.youtube.com/watch?v=6wS5xOZ7Rq8

Note

This is a joke...or is it?

:shipit: