nofux

![Join the chat at https://gitter.im/jayphelps/nofux](https://gitter.im/jayphelps/nofux?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
![build status](https://travis-ci.org/jayphelps/nofux)
![npm version](https://www.npmjs.com/package/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

`js import nofux from 'nofux'; // or const nofux = window;

class Search extends React.Component { render() { return (


                  placeholder="Search..."
          value={nofux.search || ''}
          onChange={event => {
            nofux.search = event.target.value;
            this.forceUpdate();
          }}
        />
        You have typed: {nofux.search || '(nothing yet)'}


    );
  }
}

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

Discuss

![Join the chat at https://gitter.im/jayphelps/nofux](https://gitter.im/jayphelps/nofux?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

Everyone is welcome on our Gitter channel!

Credit

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

$3

This is a joke...or is it?

:shipit:

Usage

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.

js
import nofux from 'nofux';
// or
const nofux = window;

class Search extends React.Component {
  render() {
    return (


                  placeholder="Search..."
          value={nofux.search || ''}
          onChange={event => {
            nofux.search = event.target.value;
            this.forceUpdate();
          }}
        />
        You have typed: {nofux.search || '(nothing yet)'}

);
}
}

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