use-global-hook - npm Package Compare versions

Comparing version 0.1.11 to 0.1.12

index.js

 function setState(store, newState, afterUpdateCallback) {
-  const listenersLength = store.listeners.length;
   store.state = { ...store.state, ...newState };
@@ -4,0 +3,0 @@ store.listeners.forEach((listener) => {

package.json

@@ -9,4 +9,4 @@ {
   },
-  "version": "0.1.11",
+  "version": "0.1.12",
   "author": "andregardi"
 }

readme.md

@@ -6,8 +6,18 @@ # use-global-hook
 ------------
+Table of Contents
+* [Install](#install)
+* [Example](#example)
+* [Complete Examples](#complete-examples)
+* [Using TypeScript](#using-typescript)
 
+### Install:
 
-Minimal example:
 ```javascript
+npm i use-global-hook
+```
+
+### Minimal example:
+```javascript
 import React from 'react';
-import useGlobalHook from 'use-global-hook';
+import globalHook from 'use-global-hook';
 
@@ -25,3 +35,3 @@ const initialState = {
 
-const useGlobal = useGlobalHook(React, initialState, actions);
+const useGlobal = globalHook(React, initialState, actions);
 
@@ -70,2 +80,82 @@ const App = () => {
 Map a subset of the global state before use it.
-The component will only re-render if the subset is updated.
+The component will only re-render if the subset is updated.
+
+------------
+
+
+#### [Connecting to a class component](https://codesandbox.io/s/connect-a-class-component-rgbf1 "CodeSandBox")
+Hooks can't be used inside a class component.
+We can create a Higher-Order Component that connects any class component with the state.
+With the connect() function, state and actions become props of the component.
+
+
+------------
+
+
+### Using TypeScript
+
+Install the TypeScript definitions from DefinitelyTyped
+```
+npm install @types/use-global-hook
+```
+
+Example implementation
+```javascript
+import globalHook, { Store } from 'use-global-hook';
+
+// Defining your own state and associated actions is required
+type MyState = {
+  value: string;
+};
+
+// Associated actions are what's expected to be returned from globalHook
+type MyAssociatedActions = {
+  setValue: (value: string) => void;
+  otherAction: (other: boolean) => void;
+};
+
+// setValue will be returned by globalHook as setValue.bind(null, store)
+// This is one reason we have to declare a separate associated actions type
+const setValue = (
+  store: Store<MyState, MyAssociatedActions>,
+  value: string
+) => {
+  store.setState({ ...store.state, value });
+  store.actions.otherAction(true);
+};
+
+const otherAction(
+  store: Store<MyState, MyAssociatedActions>,
+  other: boolean
+) => { /* cool stuff */ };
+
+const initialState: MyState = {
+  value: "myString"
+};
+
+// actions passed to globalHook do not need to be typed
+const actions = {
+  setValue,
+  otherAction
+};
+
+const useGlobal = globalHook<MyState, MyAssociatedActions>(
+  React,
+  initialState,
+  actions
+);
+
+// Usage
+const [state, actions] = useGlobal<MyState, MyAssociatedActions>();
+
+// Subset
+const [value, setValue] = useGlobal<string, (value: string) => void>(
+  (state: MyState) => state.value,
+  (actions: MyAssociatedActions) => actions.setValue
+);
+
+// Without declaring type, useGlobal will return unknown
+const [state, actions] = useGlobal(); // returns [unknown, unknown]
+
+// Happy TypeScripting!
+```

No alert changes

Improved metrics

Total package byte prevSize

5871

55.48%

Number of lines in readme file

159

133.82%

Worsened metrics

Lines of code

55

-1.79%

No dependency changes