Skip to content
This repository has been archived by the owner on Apr 6, 2021. It is now read-only.

Commit

Permalink
Merge pull request #2 from evilfactorylabs/ri7nz/main-functionality
Browse files Browse the repository at this point in the history
commit 0768ff2
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 23:31:06 2019 +0700

    change: README.md

commit e1ce79e
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 23:07:18 2019 +0700

    added: example in codesandbox

commit f5f7ece
Author: Rin <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 22:06:32 2019 +0700

    Update README.md

commit 93a3076
Author: Rin <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 21:54:55 2019 +0700

    Update README.md

commit 4a6584f
Merge: 276b8bb f7cb5df
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 21:24:24 2019 +0700

    Merge branch 'ri7nz/main-functionality' of github.com:evilfactorylabs/useGlobalState into ri7nz/main-functionality

commit 276b8bb
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 21:23:49 2019 +0700

    update: package name for distribution in npmjs

commit f7cb5df
Author: Rin <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 21:06:22 2019 +0700

    Update README.md

commit 7eb09a3
Author: Rin <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 21:05:35 2019 +0700

    Update README.md

commit 13da437
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 21:03:04 2019 +0700

    chore: add .npmignore

commit 2010ecb
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 20:59:25 2019 +0700

    0.0.1

commit afed592
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 20:58:29 2019 +0700

    0.0.1

commit a136487
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 20:37:58 2019 +0700

    change: Update README.md

commit f685ddb
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 19:32:03 2019 +0700

    chore: add documentation & prepare for release v1.0.0

commit a9f88c2
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 17:55:51 2019 +0700

    chore: add eslint configuration, update .gitignore, & package.json

commit 94ded8c
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 17:38:44 2019 +0700

    added: jest init

commit 5563648
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 17:28:49 2019 +0700

    added: __tests__ directory structure

commit ec82f7b
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 16:33:23 2019 +0700

    change: src to lib

commit 504e3c4
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 16:29:02 2019 +0700

    chore: add react as peer depenedencies

commit 93128e1
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 16:22:37 2019 +0700

    added: Main functionality of useGlobalState

commit 33c8a7a
Author: ri7nz <ri7nz.labs@gmail.com>
Date:   Sat Jul 27 16:12:40 2019 +0700

    init: project initialization
  • Loading branch information
r17x committed Jul 27, 2019
1 parent f21b2a0 commit 6fc287e
Show file tree
Hide file tree
Showing 9 changed files with 9,477 additions and 2 deletions.
27 changes: 27 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"jest"
],
"rules": {}
}
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
node_modules/
*.swp
*.swp
dist/
9 changes: 9 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
coverage
fixtures
__test__
.*
*.log
docs/
examples/
rollup.config.js
jest.config.js
120 changes: 118 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,118 @@
# use-globals-state
Simple State Management from react to react powered by React Hook.
# `@evilfactory/global-state`

⚛️ Simple State Management from react to react powered by React Hook.

# Install

- [Yarn](https://yarnpkg.com/en/)

```bash
$ yarn add -E @evilfactory/global-state
```

- [NPM](https://www.npmjs.com/)

```bash
$ npm i @evilfactory/global-state
```

## Usage

- [Example CodeSandbox](https://codesandbox.io/s/evilfactoryglobal-state-example-rc4b4)

<!-- Please Do not add something after # API -->

# Features

- [x] Zero configuration ✅.
- [x] React hooks based API ✅.
- [x] React Native supported ✅.
- [x] Global State & shareable ✅.
- [ ] Redux Dev Tools supported 🙏.

# API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### Table of Contents

- [StateProvider](#stateprovider)
- [Parameters](#parameters)
- [Properties](#properties)
- [Examples](#examples)
- [useGlobalState](#useglobalstate)
- [Parameters](#parameters-1)
- [Examples](#examples-1)

## StateProvider

**<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` **[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` **[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 from 'react'
import App from './you-app.js'
import {StateProvider} from 'evilfactorylabs/global-state'

const initialState = { todo: [] }

function todoReducer(state, action) {
switch (action.type) {
case "ADD_TODO":
return {
...state,
todo: [...state.todo, action.todo]
};
default:
return state;
}
}

ReactDOM.render(
<StateProvider reducer={todoReducer} initialState={initialState}>
<App/>
</StateProvider>
, document.getElementById('root'))
```

## 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'})
...
```
2 changes: 2 additions & 0 deletions __tests__/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
test.todo('StateProvider')
test.todo('useGlobalState')
28 changes: 28 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// For a detailed explanation regarding each configuration property, visit:
// https://jestjs.io/docs/en/configuration.html

module.exports = {
bail:true,
automock: true,
browser: true,
clearMocks: true,
coverageDirectory: "coverage",
coveragePathIgnorePatterns: [
"/node_modules/"
],
testEnvironment: "jest-environment-jsdom",
"transform": {
"^.+\\.[t|j]sx?$": "babel-jest"
},
testMatch: [
"**/__tests__/**/*.js?(x)",
"**/?(*.)+(spec|test).js?(x)"
],
testPathIgnorePatterns: [
"/node_modules/"
],
transformIgnorePatterns: [
"/node_modules/"
],
verbose: true,
};
88 changes: 88 additions & 0 deletions lib/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/**
* @ignore
* Main Function of useGlobalState
*
* https://github.com/evilfactorylabs/useGlobalState
*
* @version 1.0.0
*/
import {
createElement,
createContext,
useContext,
useReducer,
} from 'react'


/**
* @ignore
* @var {createContext} StateContext
*/
const StateContext = createContext()

/**
* @name <StateProvider/>
* @param {Object} props
* @property {Function} reducer **{@link https://reactjs.org/docs/hooks-reference.html#usereducer | useReducer}**
* @property {Object} initialState
* @property {Element} children **{@link https://reactjs.org/docs/react-api.html#createelement | createElement}**
* @description
* **<StateProvider/>** as Wrapper of your `React` Application.
*
* @example <caption>Example Use of `<StateProvider/>`.</caption>
* import React from 'react'
* import App from './you-app.js'
* import {StateProvider} from 'evilfactorylabs/global-state'
*
* const initialState = { todo: [] }
*
* function todoReducer(state, action) {
* switch (action.type) {
* case "ADD_TODO":
* return {
* ...state,
* todo: [...state.todo, action.todo]
* };
* default:
* return state;
* }
* }
*
* ReactDOM.render(
* <StateProvider reducer={todoReducer} initialState={initialState}>
* <App/>
* </StateProvider>
* , document.getElementById('root'))
*
*/
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 ]
}
62 changes: 62 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
{
"name": "@evilfactory/global-state",
"version": "0.0.1",
"description": "⚛️ Simple State Management from react to react powered by React Hook.",
"repository": "git@github.com:evilfactorylabs/useGlobalState.git",
"author": "ri7nz <ri7nz.labs@gmail.com>",
"license": "MIT",
"private": false,
"peerDependencies": {
"react": "^16.8.6"
},
"files": [
"lib",
"dist",
"README.md"
],
"babel": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": true
}
}
]
],
"plugins": []
},
"source": "lib/index.js",
"main": "dist/index.js",
"module": "dist/index.m.js",
"unpkg": "dist/index.umd.js",
"scripts": {
"build": "npm-run-all --silent -p build:* -s size",
"build:microbundle": "microbundle",
"size": "strip-json-comments --no-whitespace dist/*.js | gzip-size ",
"build:docs": "documentation readme lib/*.js -q --section API && yarn fixreadme",
"dev": "microbundle --watch",
"lint": "eslint ./lib --fix",
"prepare": "rm -rf dist && yarn test && yarn build",
"release": "yarn -s prepare && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish",
"test": "jest --config jest.config.js",
"test:watch": "jest --watch",
"fixreadme": "node -e 'var fs=require(\"fs\");fs.writeFileSync(\"README.md\", fs.readFileSync(\"README.md\", \"utf8\").replace(/^- /gm, \"- \"))'",
"docs": "documentation readme lib/*.js -q --section API && yarn fixreadme"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "7.5.5",
"babel-jest": "24.8.0",
"documentation": "12.0.3",
"eslint": "6.1.0",
"eslint-plugin-jest": "22.14.0",
"eslint-plugin-react": "7.14.3",
"gzip-size-cli": "3.0.0",
"jest": "24.8.0",
"microbundle": "0.11.0",
"npm-run-all": "4.1.5",
"strip-json-comments-cli": "1.0.1"
}
}
Loading

0 comments on commit 6fc287e

Please sign in to comment.