change: Update README.md

evilfactorylabs · Jul 27, 2019 · 81f5e2c · 81f5e2c
1 parent f685ddb
commit 81f5e2c
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -1,79 +1,61 @@
-# use-globals-state
+# `@evilfactorylabs/global-state`
 
-Simple State Management from react to react powered by React Hook.
+Simple State Management from react to react and powered by React Hook.
+
+# Install
+
+- [Yarn](https://yarnpkg.com/en/)
+
+```bash
+$ yarn add -E @evilfactorylabs/global-state
+```
+
+- [NPM](https://www.npmjs.com/)
+
+```bash
+$ npm i @evilfactorylabs/global-state 
+```
 
 # API
 
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 
 ### Table of Contents
 
-- [useReducer](#usereducer)
-- [StateContext](#statecontext)
-- [useGlobalState](#useglobalstate)
+- [StateProvider](#stateprovider)
     -   [Parameters](#parameters)
+    -   [Properties](#properties)
     -   [Examples](#examples)
-- [StateProvider](#stateprovider)
+- [useGlobalState](#useglobalstate)
     -   [Parameters](#parameters-1)
-    -   [Properties](#properties)
     -   [Examples](#examples-1)
 
-## useReducer
-
-Main Function of useGlobalState
-
-<https://github.com/evilfactorylabs/useGlobalState>
-
-**Meta**
-
-- **version**: 1.0.0
-
-## StateContext
-
-Type: createContext
-
-## useGlobalState
-
-### Parameters
-
-- `newAction` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** 
-
-### Examples
-
-```javascript
-(state, action, todo) => {
- return action({
-   type: 'ADD_TODO',
-   data: {
-     ...state,
-     todo: [
-       ...state.todo,
-       todo,
-     ],
-   } 
- })
-}
-```
-
 ## StateProvider
 
-Provider of this state management
+**<StateProvider/>** as Wrapper of your `React` Application.
 
 ### Parameters
 
 - `props` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
+    -   `props.reducer`  
+    -   `props.initialState`  
+    -   `props.children`  
 
 ### Properties
 
-- `reducer` **[useReducer](#usereducer)** 
+- `reducer` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** **[| useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer)**
 - `initialState` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
-- `children` **([Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling) | React.Element)** 
+- `children` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** **[| createElement](https://reactjs.org/docs/react-api.html#createelement)**
 
 ### Examples
 
+Example Use of `<StateProvider/>`.
+
+
 ```javascript
 import React, {useReducer} from 'react'
-import App from './App'
+import App from './you-app.js'
+import {StateProvider} from 'evilfactorylabs/global-state'
 
 const initialState = { todo: [] } 
 const reducer = useReducer(state, action)
@@ -85,4 +67,27 @@ ReactDOM.render(
 , document.getElementById('root'))
 ```
 
-Returns **ReactElement** See [ReactElement]\(<https://reactjs.org/docs/react-api.html#createelement>)
+## useGlobalState
+
+### Parameters
+
+- `newAction` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** [optional]
+
+### Examples
+
+```javascript
+import {useGlobalState} from '@evilfactorylabs/global-state'
+
+...
+const createTodo = (state, action, todo) => {
+ return action({
+   type: 'ADD_TODO',
+   data: todo,
+ })
+} 
+
+const [,addTodo] = useGlobalState(createTodo)
+
+addTodo({title: 'New Task'})
+...
+```
diff --git a/lib/index.js b/lib/index.js
@@ -1,4 +1,5 @@
 /**
+ * @ignore 
  * Main Function of useGlobalState
  *
  * https://github.com/evilfactorylabs/useGlobalState
@@ -14,47 +15,24 @@ import {
 
 
 /**
+ * @ignore
  * @var {createContext} StateContext  
  */
 const StateContext = createContext()
 
 /**
- * @param {Function} newAction 
- * @example 
- * (state, action, todo) => {
- *  return action({
- *    type: 'ADD_TODO',
- *    data: {
- *      ...state,
- *      todo: [
- *        ...state.todo,
- *        todo,
- *      ],
- *    } 
- *  })
- * } 
- */
-
-export const useGlobalState = (newAction) => {
-    const [state, action] = useContext(StateContext)
-    // newAction is action injector
-    return [state, newAction ? newAction.bind(null, state, action) : action ]
-}
-
-
-/**
- * @name StateProvider
+ * @name <StateProvider/>
  * @param {Object} props
- * @property {useReducer} reducer
+ * @property {Function} reducer **{@link https://reactjs.org/docs/hooks-reference.html#usereducer | useReducer}**
  * @property {Object} initialState
- * @property {Node|React.Element} children
- *
+ * @property {Element} children **{@link https://reactjs.org/docs/react-api.html#createelement | createElement}**
  * @description 
- *  Provider of this state management
+ *  **<StateProvider/>** as Wrapper of your `React` Application.
  *
- * @example
+ * @example <caption>Example Use of `<StateProvider/>`.</caption>
  * import React, {useReducer} from 'react'
- * import App from './App'
+ * import App from './you-app.js'
+ * import {StateProvider} from 'evilfactorylabs/global-state'
  *
  * const initialState = { todo: [] } 
  * const reducer = useReducer(state, action)
@@ -65,9 +43,35 @@ export const useGlobalState = (newAction) => {
  *    </StateProvider>
  * , document.getElementById('root'))
  *
- * @return {ReactElement} - See [ReactElement]({@link https://reactjs.org/docs/react-api.html#createelement})
  */
 export const StateProvider = ({reducer, initialState, children }) => createElement(StateContext.Provider, {
     value: useReducer(reducer, initialState)
 }, children)
 
+
+/**
+ * @function useGlobalState 
+ * @name useGlobalState
+ * @param {Function=} newAction [optional]
+ * @example 
+ * import {useGlobalState} from '@evilfactorylabs/global-state'
+ *
+ * ...
+ * const createTodo = (state, action, todo) => {
+ *  return action({
+ *    type: 'ADD_TODO',
+ *    data: todo,
+ *  })
+ * } 
+ *
+ * const [,addTodo] = useGlobalState(createTodo)
+ *
+ * addTodo({title: 'New Task'})
+ * ...
+ */
+
+export const useGlobalState = (newAction) => {
+    const [state, action] = useContext(StateContext)
+    // newAction is action injector
+    return [state, newAction ? newAction.bind(null, state, action) : action ]
+}