init.

Author: kelp404

.editorconfig

@@ -0,0 +1,17 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# 2 space indentation
+[*.{html,scss,js,json,yml}]
+indent_style = space
+indent_size = 2
+
+[*.{md,markdown}]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,33 @@
+module.exports = {
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+    node: true
+  },
+  extends: [
+    'xo',
+    'xo-space',
+    'xo-react/space'
+  ],
+  globals: {
+    jest: 'readonly',
+    test: 'readonly',
+    expect: 'readonly',
+    beforeEach: 'readonly',
+    afterEach: 'readonly'
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 2018
+  },
+  plugins: [
+    'react'
+  ],
+  rules: {
+    'no-eq-null': 0,
+    eqeqeq: ['error', 'allow-null']
+  }
+};

.gitignore

@@ -0,0 +1,15 @@
+# OS X
+.DS_Store
+
+# npm
+node_modules
+package-lock.json
+
+# build
+dist/
+
+# test scripts
+coverage/
+
+# WebStorm
+.idea

README.md

@@ -1,2 +1,50 @@
 # react-hooks-shared-state
 A global state for React with Hooks API.
+
+## Installation
+```bash
+$ npm install react-hooks-shared-state --save
+```
+
+## Live demo
+[https://kelp404.github.io/react-hooks-shared-state](https://kelp404.github.io/react-hooks-shared-state)
+
+## Quick start
+```js
+const {useSharedState} = require('react-hooks-shared-state');
+
+const Component = () => {
+  const [state, setState] = useSharedState(null, {value: 'hello'});
+  const onChange = e => {
+    setState(Object.assign({}, state, {value: e.target.value}));
+  };
+
+  return (
+    <input value={state.value} onChange={onChange}/>
+  );
+};
+```
+
+## Document
+### Syntactic sugar
+```js
+const {useSharedState} = require('react-hooks-shared-state');
+```
+```js
+const sharedState = require('react-hooks-shared-state');
+sharedState.useState()
+```
+`useSharedState` and `sharedState.useState` are the same one.
+
+### useSharedState(path, initialState)
+### Parameter `path`
+Type: `string`  
+Required: `optional`  
+The object path of the state.  
+When the path is null it will return the state(root).  
+If you just want to use a part of state in the component, pass the object path.
+
+### Parameter `initialState`
+Type: `any`  
+Required: `optional`  
+The initial state.

config/default.js

@@ -0,0 +1,6 @@
+module.exports = {
+  server: {
+    host: 'localhost',
+    port: 8000
+  }
+};

example/app.js

@@ -0,0 +1,109 @@
+require('@babel/polyfill');
+const React = require('react');
+const ReactDOM = require('react-dom');
+const {useSharedState} = require('../');
+
+const {useEffect} = React;
+
+const FormA = props => {
+  const [state, setState] = useSharedState('a', 'value a');
+
+  const onChange = e => {
+    setState(e.target.value);
+  };
+
+  useEffect(() => {
+    console.log(`effect A: ${state}`);
+  });
+
+  return (
+    <div {...props}>
+      <h2>Form A</h2>
+      <form>
+        <div className="form-row">
+          <div className="form-group">
+            <label htmlFor="inputAddress">state.a</label>
+            <input type="text" className="form-control" value={state} onChange={onChange}/>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+const FormB = props => {
+  const [state, setState] = useSharedState('b', 'value b');
+  const onChange = e => {
+    setState(e.target.value);
+  };
+
+  useEffect(() => {
+    console.log(`effect B: ${state}`);
+  });
+
+  return (
+    <div {...props}>
+      <h2>Form B</h2>
+      <form>
+        <div className="form-row">
+          <div className="form-group">
+            <label htmlFor="inputAddress">state.b</label>
+            <input type="text" className="form-control" value={state} onChange={onChange}/>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+const FormC = props => {
+  const [state, setState] = useSharedState();
+
+  const onChangeA = e => {
+    setState(Object.assign({}, state, {a: e.target.value}));
+  };
+
+  const onChangeB = e => {
+    setState(Object.assign({}, state, {b: e.target.value}));
+  };
+
+  useEffect(() => {
+    console.log(`effect C: ${JSON.stringify(state)}`);
+  });
+
+  return (
+    <div {...props}>
+      <h2>Form C</h2>
+      <form>
+        <div className="form-row">
+          <div className="form-group">
+            <label htmlFor="inputAddress">state.a</label>
+            <input type="text" className="form-control" value={state.a} onChange={onChangeA}/>
+          </div>
+          <div className="form-group">
+            <label htmlFor="inputAddress">state.b</label>
+            <input type="text" className="form-control" value={state.b} onChange={onChangeB}/>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+ReactDOM.render(
+  (
+    <>
+      <nav className="navbar navbar-expand-lg navbar-light bg-light">
+        <a className="navbar-brand" href="/react-hooks-shared-state">react-hooks-shared-state</a>
+      </nav>
+      <div className="container pt-3">
+        <div className="row">
+          <FormA className="col"/>
+          <FormB className="col"/>
+          <FormC className="col"/>
+        </div>
+      </div>
+    </>
+  ),
+  document.getElementById('root')
+);

example/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <title>react-hooks-shared-state</title>
+  <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
+  <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"/>
+</head>
+<body>
+<div id="root">
+  <p class="text-center text-muted h3" style="padding: 20px 0">
+    <i class="fa fa-spinner fa-pulse fa-fw"></i> Loading...
+  </p>
+</div>
+<a href="https://github.com/kelp404/react-hooks-shared-state" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+<script type="text/javascript" src="http://localhost:8001/app.js"></script>
+</body>
+</html>

example/server.js

@@ -0,0 +1,17 @@
+const http = require('http');
+const path = require('path');
+const config = require('config');
+const express = require('express');
+
+const app = express();
+const server = http.createServer(app);
+
+app.use((req, res) => {
+  res.sendFile(path.join(__dirname, 'index.html'));
+});
+
+// Launch server.
+server.listen(config.server.port, config.server.host, () => {
+  const {address, port} = server.address();
+  console.log(`Server listening at http://${address}:${port}/react-hooks-shared-state`);
+});

index.html

@@ -0,0 +1 @@
+./example/index.html

index.js

@@ -0,0 +1,8 @@
+const SharedState = require('./lib/shared-state');
+
+const sharedState = new SharedState();
+
+exports.setState = sharedState.setState;
+exports.setSharedState = sharedState.setState;
+exports.useState = sharedState.useState;
+exports.useSharedState = sharedState.useState;