react-better-model 0.1.1 → 0.1.4

package/lib/index.d.ts

@@ -17,6 +17,7 @@ export declare class Model<S, E = {}> {
     dispatch: <K extends keyof E>(key: K, data?: (E[K] extends undefined ? never : E[K]) | undefined) => void;
     reset: () => void;
 }
+export declare function useModelCtx<M extends Model<M['state'], M['events']>>(ctx: Context<M>): M;
 export declare function useModelInstanceState<K extends keyof M['state'], M extends Model<M['state'], M['events']>>(viewModel: M, key: K): [M['state'][K], (data: M['state'][K]) => void];
 export declare function useModelCtxState<K extends keyof M['state'], M extends Model<M['state'], M['events']>>(ctx: Context<M>, key: K): [M["state"][K], (data: M["state"][K]) => void];
 export declare function useModelInstanceEvent<K extends keyof M['events'], D extends M['events'], M extends Model<M['state'], M['events']>>(viewModel: M, ns: K, cb?: Sub<D, K>): (data?: (D[K] extends undefined ? never : D[K]) | undefined) => void;

package/lib/index.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useModelCtxEvent = exports.useModelInstanceEvent = exports.useModelCtxState = exports.useModelInstanceState = exports.Model = void 0;
+exports.useModelCtxEvent = exports.useModelInstanceEvent = exports.useModelCtxState = exports.useModelInstanceState = exports.useModelCtx = exports.Model = void 0;
 var react_1 = require("react");
 var Model = /** @class */ (function () {
     function Model(state, events) {
@@ -86,6 +86,10 @@ var Model = /** @class */ (function () {
     return Model;
 }());
 exports.Model = Model;
+function useModelCtx(ctx) {
+    return (0, react_1.useContext)(ctx);
+}
+exports.useModelCtx = useModelCtx;
 function useModelInstanceState(viewModel, key) {
     var _a = (0, react_1.useState)(viewModel.state[key]), value = _a[0], setValue = _a[1];
     (0, react_1.useEffect)(function () { return viewModel.onStateChange(key, setValue); }, []);

package/package.json

@@ -1,9 +1,16 @@
 {
   "name": "react-better-model",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "keywords": [
+    "React",
+    "Shared",
+    "Model",
+    "Store",
+    "Events"
+  ],
   "repository": {
     "type": "git",
     "url": "git@github.com:ingvardm/react-model-hooks.git"

package/readme.md

@@ -0,0 +1,101 @@
+React Better Model
+===
+Easy way to share state and events between components and services.
+
+Installation:
+===
+```bash
+npm i react-better-model
+```
+or
+```bash
+yarn add react-better-model
+```
+
+Usage
+===
+```typescript
+// CounterModel.ts
+export const initialState = {
+	count: 0,
+}
+
+export const defaultEventData = {
+	click: undefined,
+}
+
+// create context
+export const CounterModelCtx = createContext(new Model(initialState, defaultEventData))
+
+```
+
+```typescript
+// CounterText.tsx
+const CounterText = () => {
+	const [count, setCount] = useModelCtxState(CounterModelCtx, 'count')
+
+	return <p>{count}</p>
+}
+```
+
+```typescript
+// CounterIncrementButton.tsx
+const CounterIncrementButton = () => {
+	const [count, setCount] = useModelCtxState(CounterModelCtx, 'count')
+
+	const onClick = useCallback(() => {
+		setCount(count + 1)
+	}, [count])
+
+	return <button onClick={onClick}>Press me!</button>
+}
+```
+
+```typescript
+// CounterClearButton.tsx
+const CounterClearButton = () => {
+	const dispatchClear = useModelCtxEvent(CounterModelCtx, 'clear')
+
+	const onClick = useCallback(() => {
+		dispatchClear()
+	}, [])
+
+	return <button onClick={onClick}>Clear</button>
+}
+```
+
+```typescript
+// Counter.tsx
+const Counter = () => {
+	const model = useMemo(() => {
+		return new Model(initialState, defaultEventData)
+	}, [])
+
+	const [count, setCount] = useModelInstanceState(model, 'count')
+
+	const onClear = useCallback(() => {
+		setCount(0)
+	}, [])
+
+	useModelInstanceEvent(model, 'clear', onClear)
+
+	return <div>
+		<CounterModelCtx.Provider value={model}>
+			<CounterText />
+			<CounterIncrementButton />
+			<CounterClearButton />
+		</CounterModelCtx.Provider>
+	</div>
+}
+```
+
+```typescript
+// app.js
+const App = () => {
+	return <div>
+		<Counter />
+		<Counter />
+		<Counter />
+	</div>
+}
+```