added readme

Author: Pyrolistical

README.md

@@ -0,0 +1,59 @@
+# flipstate
+
+*Flip to any state*
+
+React v16.3 Context API solved prop drilling but produced a huge unmanagable state tree. `flipstate` solves this by decomposing `Context.Provider` into smaller state. Easily manage state per component, but keep the power of having all the state in a single place.
+
+Getting started
+---------------
+Here is a simple counter application.
+```js
+import React from 'react'
+import {render} from 'react-dom'
+import createState from 'flipstate'
+
+const {
+  StateProvider,
+  GlobalState,
+  addState
+} = createState()
+
+const CounterState = addState('Counter', {
+  count: 0,
+  increment({count}, amount) {
+    return {
+      count: count + amount
+    }
+  },
+  decrement({count}, amount) {
+    return {
+      count: count - amount
+    }
+  }
+})
+const Counter = () =>
+  <CounterState>{({count, increment, decrement}) =>
+    <>
+      <p>count: {count}</p>
+      <button onClick={() => increment(1)}>+</button>
+      <button onClick={() => decrement(1)}>-</button>
+    </>
+  }</CounterState>
+
+render(<StateProvider>
+  <Counter/>
+</StateProvider>, document.getElementById('entry'))
+```
+
+Highlights
+----------
+ * added state are just render prop components
+ * `StateProvider` is the Context API provider and works in the same way. Only state components that are decendents of `StateProvider` will receive updates (but don't need to be direct children)
+ * modules can export state for others to consume. Think `AuthState` that updates when user logins.
+ * compose states from multiple components using https://github.com/gnapse/render-props-compose
+ * state is composed of data + actions
+ * actions return an update to merge into the state
+ * actions can be `async`
+ * use dynamic import to code split new data/actions/state/components
+ * supports preact, just import 'flipstate/preact'. Requires https://github.com/valotas/preact-context
+ * incoming dev tool which will allow you to flip to any state

sample/preact.html

@@ -39,7 +39,6 @@
             h('button', {onClick: () => decrement(1)}, '-')
           )
         )
-        console.log({StateProvider, Counter})
       render(h(StateProvider, {}, h(Counter)), document.body)
     </script>
   </body>

sample/react.html

@@ -41,7 +41,6 @@
             h('button', {onClick: () => decrement(1)}, '-')
           )
         )
-        console.log({StateProvider, Counter})
       render(h(StateProvider, {}, h(Counter)), document.getElementById('entry'))
     </script>
   </body>