realar - npm Package Compare versions

Comparing version 0.4.22 to 0.4.23

package.json

 {
   "name": "realar",
-  "version": "0.4.22",
+  "version": "0.4.23",
   "description": "React state manager",
@@ -88,3 +88,3 @@ "repository": {
   },
-  "gitHead": "21164c6243f93353ded26494c6f6a6b1325805ac"
+  "gitHead": "78197c18b47a5fe2c95ace5b19165a830181e8e7"
 }

README.md

@@ -193,9 +193,6 @@ # Realar
 
+### Actions
 
-### Documentation
+The `action` allows you to trigger an event and delivers the functionality to subscribe to it anywhere in your application code.
 
-**action**
-
-The action allows you to trigger an event and delivers the functionality to subscribe to it anywhere in your application code.
-
 ```javascript
@@ -229,2 +226,61 @@ const add = action();
 
+### Access visibility levels
+
+The basic level of scopes for React developers is a **component level scope** (_for example `useState`, and other standard React hooks has that level_).
+
+Every React component instance has its own local state, which is saved every render for the component as long as the component is mounted.
+
+In the Realar ecosystem `useLocal` hook used to make components local state.
+
+```javascript
+const CounterLogic = () => {
+
+  const [get, set] = box(0);
+  const inc = () => set(get() + 1);
+
+  return sel(() => ({
+    value: get(),
+    inc
+  }));
+}
+
+const Counter = () => {
+  const { value, inc } = useLocal(CounterLogic);
+
+  return (
+    <p>{value} <button onClick={inc}>+</button></p>
+  );
+}
+
+export const App = () => (
+  <>
+    <Counter />
+    <Counter />
+  </>
+);
+```
+[Play on CodeSandbox](https://codesandbox.io/s/realar-component-level-scope-functional-5pjdy?file=/src/App.tsx)
+
+Or If you coding in classes style:
+
+```javascript
+class CounterLogic {
+  @prop value = 0;
+  inc = () => this.value += 1
+}
+
+const Counter = () => {
+  const { value, inc } = useLocal(CounterLogic);
+
+  return (
+    <p>{value} <button onClick={inc}>+</button></p>
+  );
+}
+```
+[Play wrapped on CodeSandbox](https://codesandbox.io/s/realar-component-level-scope-classes-m0i10?file=/src/App.tsx)
+
+This feature can be useful for removing logic from the body of a component to keep that free of unnecessary code, and therefore cleaner.
+
+### Documentation
+
 **box**
@@ -312,3 +368,3 @@
 
-_Documentation not ready yet for `sel`, `shared`, `effect`, `initial`, `mock`, `unmock`, `free`, `useLocal`, `useValue`, `useShared`, `useScoped`, `Scope`, `observe`, `transaction`, `cache`, `prop` functions. It's coming soon._
+_Documentation not ready yet for `sel`, `shared`, `effect`, `initial`, `mock`, `unmock`, `free`, `useValue`, `useShared`, `useScoped`, `Scope`, `observe`, `transaction`, `cache`, `prop` functions. It's coming soon._
 
@@ -315,0 +371,0 @@ ### Demos

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43194

increased by3.4%

Number of lines in readme file

402

increased by16.18%

No dependency changes