react-reactive-val 1.0.5 → 2.0.0

package/README.md

@@ -1,6 +1,6 @@
 # React Reactive Val
 
-A lightweight, type-safe reactive value management library for React applications. This library provides a simple way to manage reactive values in React components with minimal boilerplate.
+A lightweight, type-safe reactive value management library for React applications. This library provides a simple way to manage reactive values in React components with minimal boilerplate and includes powerful Context integration for efficient state sharing.
 
 ## Features
 
@@ -10,6 +10,7 @@ A lightweight, type-safe reactive value management library for React application
 - 🔄 **Reactive**: Values update automatically across components
 - 📦 **Tree-shakeable**: Only import what you need
 - 🌳 **Multiple formats**: Supports ESM, CommonJS, and UMD
+- 🌟 **Context Support**: Share reactive values efficiently through React Context
 
 ## Installation
 
@@ -34,9 +35,7 @@ function Counter() {
   return (
     <div>
       <p>Count: {count()}</p>
-      <button onClick={() => count(prev => prev + 1)}>
-        Increment
-      </button>
+      <button onClick={() => count(prev => prev + 1)}>Increment</button>
     </div>
   );
 }
@@ -44,11 +43,13 @@ function Counter() {
 
 ### Sharing State Between Components
 
+#### Using Direct Reference
+
 ```tsx
 import { reallyReactiveVal } from 'react-reactive-val';
 
 // Create a shared reactive value
-const sharedCount = reallyReactiveVal(0);
+const [sharedCount, CountProvider, useSharedCount] = reallyReactiveVal(0);
 
 function CounterDisplay() {
   return <div>Count: {sharedCount()}</div>;
@@ -57,12 +58,41 @@ function CounterDisplay() {
 function CounterButtons() {
   return (
     <div>
-      <button onClick={() => sharedCount(prev => prev + 1)}>
-        Increment
-      </button>
-      <button onClick={() => sharedCount(prev => prev - 1)}>
-        Decrement
-      </button>
+      <button onClick={() => sharedCount(prev => prev + 1)}>Increment</button>
+      <button onClick={() => sharedCount(prev => prev - 1)}>Decrement</button>
+    </div>
+  );
+}
+```
+
+#### Using Context (New in v2)
+
+```tsx
+import { reallyReactiveVal } from 'react-reactive-val';
+
+// Create a reactive value with context
+const [countValue, CountProvider, useCountContext] = reallyReactiveVal(0);
+
+function App() {
+  return (
+    <CountProvider>
+      <CounterDisplay />
+      <CounterButtons />
+    </CountProvider>
+  );
+}
+
+function CounterDisplay() {
+  const count = useCountContext();
+  return <div>Count: {count()}</div>;
+}
+
+function CounterButtons() {
+  const count = useCountContext();
+  return (
+    <div>
+      <button onClick={() => count(prev => prev + 1)}>Increment</button>
+      <button onClick={() => count(prev => prev - 1)}>Decrement</button>
     </div>
   );
 }
@@ -83,14 +113,17 @@ const value = useReactiveValue(initialValue);
 
 ### `reallyReactiveVal<T>(initialValue: T)`
 
-Creates a standalone reactive value that can be used across components.
+Creates a standalone reactive value that can be used across components. In v2, it returns a tuple containing the reactive value function, a Context Provider component, and a custom hook for accessing the value through context.
 
 ```tsx
-const value = reallyReactiveVal(initialValue);
+const [value, Provider, useValue] = reallyReactiveVal(initialValue);
 ```
 
 - `initialValue`: The initial value of the reactive state
-- Returns: A function that can both read and update the value
+- Returns: A tuple containing:
+  1. A function that can both read and update the value
+  2. A Context Provider component for wrapping consumers
+  3. A custom hook for accessing the value within the Context
 
 ### Usage with Value Getter/Setter
 
@@ -117,7 +150,10 @@ const count = useReactiveValue(0); // type: number
 const user = useReactiveValue<User | null>(null);
 
 // Type checking for updates
-user(prev => ({ ...prev, name: "John" })); // Type safe!
+user(prev => ({ ...prev, name: 'John' })); // Type safe!
+
+// With Context
+const [userValue, UserProvider, useUser] = reallyReactiveVal<User | null>(null);
 ```
 
 ## Contributing
@@ -125,9 +161,9 @@ user(prev => ({ ...prev, name: "John" })); // Type safe!
 Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
 
 1. Fork the repository
-2. Create your feature branch (\`git checkout -b feature/amazing-feature\`)
-3. Commit your changes (\`git commit -m 'Add some amazing feature'\`)
-4. Push to the branch (\`git push origin feature/amazing-feature\`)
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
 5. Open a Pull Request
 
 ## License
@@ -136,4 +172,4 @@ This project is licensed under the ISC License - see the [LICENSE](LICENSE) file
 
 ## Author
 
-Jatin Parate ([@jatin4228](https://github.com/jatin4228)) 
+Jatin Parate ([@jatin4228](https://github.com/jatin4228))

package/dist/index.cjs.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.cjs.js.LICENSE.txt */
-(()=>{"use strict";var e={698:(e,r)=>{var t=Symbol.for("react.transitional.element");function n(e,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var u in n={},r)"key"!==u&&(n[u]=r[u]);else n=r;return r=n.ref,{$$typeof:t,type:e,key:o,ref:void 0!==r?r:null,props:n}}Symbol.for("react.fragment"),r.jsx=n},848:(e,r,t)=>{e.exports=t(698)}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var u=r[n]={exports:{}};return e[n](u,u.exports,t),u.exports}t.d=(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};t.r(n),t.d(n,{default:()=>i,reallyReactiveVal:()=>a});const o=require("react");var u=t(848);function i(e){return(0,o.useMemo)((function(){return a(e)}),[e])}var a=function(e){var r=e,t=new Set,n=(0,o.memo)((function(){return(0,o.useSyncExternalStore)((function(e){return t.add(e),function(){return t.delete(e)}}),(function(){return r}))}));return function(e){if(void 0===e)return(0,u.jsx)(n,{});r="function"==typeof e?e(r):e,t.forEach((function(e){e()}))}};module.exports=n})();
+(()=>{"use strict";var e={698:(e,r)=>{var t=Symbol.for("react.transitional.element");function n(e,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var u in n={},r)"key"!==u&&(n[u]=r[u]);else n=r;return r=n.ref,{$$typeof:t,type:e,key:o,ref:void 0!==r?r:null,props:n}}Symbol.for("react.fragment"),r.jsx=n},848:(e,r,t)=>{e.exports=t(698)}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var u=r[n]={exports:{}};return e[n](u,u.exports,t),u.exports}t.d=(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};t.r(n),t.d(n,{default:()=>i,reallyReactiveVal:()=>a});const o=require("react");var u=t(848);function i(e){return(0,o.useMemo)((function(){return a(e)}),[e])}var a=function(e){var r=e,t=new Set,n=(0,o.memo)((function(){return(0,o.useSyncExternalStore)((function(e){return t.add(e),function(){return t.delete(e)}}),(function(){return r}))}));function i(e){if(void 0===e)return(0,u.jsx)(n,{});r="function"==typeof e?e(r):e,t.forEach((function(e){e()}))}var a=(0,o.createContext)(i);return[i,(0,o.memo)((function(){return(0,u.jsx)(a.Provider,{value:i})})),function(){return(0,o.useContext)(a)}]};module.exports=n})();

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode, type ReactElement } from "react";
-export default function useReactiveValue<T extends ReactNode>(initialValue: T): <U extends (T | ((currVal: T) => T)) | unknown | undefined>(updater?: U | undefined) => U extends T | ((currVal: T) => T) ? undefined : ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export declare const reallyReactiveVal: <T extends ReactNode>(initialValue: T) => <U extends (T | ((currVal: T) => T)) | unknown | undefined>(updater?: U) => U extends T | ((currVal: T) => T) ? undefined : ReactElement;
+import { type ReactNode, type ReactElement } from 'react';
+export default function useReactiveValue<T extends ReactNode>(initialValue: T): (import("react").NamedExoticComponent<object> | (<U extends (T | ((currVal: T) => T)) | unknown | undefined>(updater?: U | undefined) => U extends T | ((currVal: T) => T) ? undefined : ReactElement<unknown, string | import("react").JSXElementConstructor<any>>) | (() => <U extends (T | ((currVal: T) => T)) | unknown | undefined>(updater?: U | undefined) => U extends T | ((currVal: T) => T) ? undefined : ReactElement<unknown, string | import("react").JSXElementConstructor<any>>))[];
+export declare const reallyReactiveVal: <T extends ReactNode>(initialValue: T) => ((<U extends (T | ((currVal: T) => T)) | unknown | undefined>(updater?: U) => U extends T | ((currVal: T) => T) ? undefined : ReactElement) | import("react").NamedExoticComponent<object> | (() => <U extends (T | ((currVal: T) => T)) | unknown | undefined>(updater?: U) => U extends T | ((currVal: T) => T) ? undefined : ReactElement))[];
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EAIlB,MAAM,OAAO,CAAC;AAGf,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,SAAS,SAAS,EAAE,YAAY,EAAE,CAAC,IAqC7D,CAAC,SAAS,4BAAU,OAAO,GAAG,SAAS,yJAnCtD;AAED,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,SAAS,EAAE,cAAc,CAAC,KAiCvD,CAAC,CAAC,SAAS,gBAjBM,CAAC,KAAK,CAAC,KAiBH,OAAO,GAAG,SAAS,EACnD,OAAO,CAAC,EAAE,CAAC,KACR,CAAC,wBAnBwB,CAAC,KAAK,CAAC,IAmBZ,SAAS,GAAG,YACtC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EAMlB,MAAM,OAAO,CAAC;AAGf,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,SAAS,SAAS,EAAE,YAAY,EAAE,CAAC,qDAsB5D,CAAC,SAAS,4BAAU,OAAO,GAAG,SAAS,oKAAvC,CAAC,SAAS,4BAAU,OAAO,GAAG,SAAS,6JApBvD;AAED,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,SAAS,EAAE,cAAc,CAAC,QAkBrD,CAAC,SAAS,gBAFK,CAAC,KAAK,CAAC,KAEF,OAAO,GAAG,SAAS,YAC1C,CAAC,KACR,CAAC,wBAJwB,CAAC,KAAK,CAAC,IAIZ,SAAS,GAAG,YAAY,2DAFlC,CAAC,SAAS,gBAFK,CAAC,KAAK,CAAC,KAEF,OAAO,GAAG,SAAS,YAC1C,CAAC,KACR,CAAC,wBAJwB,CAAC,KAAK,CAAC,IAIZ,SAAS,GAAG,YAAY,IA4BlD,CAAC"}

package/dist/index.esm.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.esm.js.LICENSE.txt */
-import*as e from"react";var r={698:(e,r)=>{var t=Symbol.for("react.transitional.element");function n(e,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var u in n={},r)"key"!==u&&(n[u]=r[u]);else n=r;return r=n.ref,{$$typeof:t,type:e,key:o,ref:void 0!==r?r:null,props:n}}Symbol.for("react.fragment"),r.jsx=n},848:(e,r,t)=>{e.exports=t(698)}},t={};function n(e){var o=t[e];if(void 0!==o)return o.exports;var u=t[e]={exports:{}};return r[e](u,u.exports,n),u.exports}n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r);const o=(e=>{var r={};return n.d(r,e),r})({memo:()=>e.memo,useMemo:()=>e.useMemo,useSyncExternalStore:()=>e.useSyncExternalStore});var u=n(848);function a(e){return(0,o.useMemo)((function(){return f(e)}),[e])}var f=function(e){var r=e,t=new Set,n=(0,o.memo)((function(){return(0,o.useSyncExternalStore)((function(e){return t.add(e),function(){return t.delete(e)}}),(function(){return r}))}));return function(e){if(void 0===e)return(0,u.jsx)(n,{});r="function"==typeof e?e(r):e,t.forEach((function(e){e()}))}};export{a as default,f as reallyReactiveVal};
+import*as e from"react";var r={698:(e,r)=>{var t=Symbol.for("react.transitional.element");function n(e,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var u in n={},r)"key"!==u&&(n[u]=r[u]);else n=r;return r=n.ref,{$$typeof:t,type:e,key:o,ref:void 0!==r?r:null,props:n}}Symbol.for("react.fragment"),r.jsx=n},848:(e,r,t)=>{e.exports=t(698)}},t={};function n(e){var o=t[e];if(void 0!==o)return o.exports;var u=t[e]={exports:{}};return r[e](u,u.exports,n),u.exports}n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r);const o=(e=>{var r={};return n.d(r,e),r})({createContext:()=>e.createContext,memo:()=>e.memo,useContext:()=>e.useContext,useMemo:()=>e.useMemo,useSyncExternalStore:()=>e.useSyncExternalStore});var u=n(848);function a(e){return(0,o.useMemo)((function(){return f(e)}),[e])}var f=function(e){var r=e,t=new Set,n=(0,o.memo)((function(){return(0,o.useSyncExternalStore)((function(e){return t.add(e),function(){return t.delete(e)}}),(function(){return r}))}));function a(e){if(void 0===e)return(0,u.jsx)(n,{});r="function"==typeof e?e(r):e,t.forEach((function(e){e()}))}var f=(0,o.createContext)(a);return[a,(0,o.memo)((function(){return(0,u.jsx)(f.Provider,{value:a})})),function(){return(0,o.useContext)(f)}]};export{a as default,f as reallyReactiveVal};

package/dist/index.umd.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.umd.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("ReactReactiveVal",["react"],t):"object"==typeof exports?exports.ReactReactiveVal=t(require("react")):e.ReactReactiveVal=t(e.React)}(this,(e=>(()=>{"use strict";var t={442:t=>{t.exports=e},698:(e,t)=>{var r=Symbol.for("react.transitional.element");function o(e,t,o){var n=null;if(void 0!==o&&(n=""+o),void 0!==t.key&&(n=""+t.key),"key"in t)for(var a in o={},t)"key"!==a&&(o[a]=t[a]);else o=t;return t=o.ref,{$$typeof:r,type:e,key:n,ref:void 0!==t?t:null,props:o}}Symbol.for("react.fragment"),t.jsx=o},848:(e,t,r)=>{e.exports=r(698)}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};o.r(n),o.d(n,{default:()=>i,reallyReactiveVal:()=>f});var a=o(442),u=o(848);function i(e){return(0,a.useMemo)((function(){return f(e)}),[e])}var f=function(e){var t=e,r=new Set,o=(0,a.memo)((function(){return(0,a.useSyncExternalStore)((function(e){return r.add(e),function(){return r.delete(e)}}),(function(){return t}))}));return function(e){if(void 0===e)return(0,u.jsx)(o,{});t="function"==typeof e?e(t):e,r.forEach((function(e){e()}))}};return n})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("ReactReactiveVal",["react"],t):"object"==typeof exports?exports.ReactReactiveVal=t(require("react")):e.ReactReactiveVal=t(e.React)}(this,(e=>(()=>{"use strict";var t={442:t=>{t.exports=e},698:(e,t)=>{var r=Symbol.for("react.transitional.element");function o(e,t,o){var n=null;if(void 0!==o&&(n=""+o),void 0!==t.key&&(n=""+t.key),"key"in t)for(var u in o={},t)"key"!==u&&(o[u]=t[u]);else o=t;return t=o.ref,{$$typeof:r,type:e,key:n,ref:void 0!==t?t:null,props:o}}Symbol.for("react.fragment"),t.jsx=o},848:(e,t,r)=>{e.exports=r(698)}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var u=r[e]={exports:{}};return t[e](u,u.exports,o),u.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};o.r(n),o.d(n,{default:()=>i,reallyReactiveVal:()=>f});var u=o(442),a=o(848);function i(e){return(0,u.useMemo)((function(){return f(e)}),[e])}var f=function(e){var t=e,r=new Set,o=(0,u.memo)((function(){return(0,u.useSyncExternalStore)((function(e){return r.add(e),function(){return r.delete(e)}}),(function(){return t}))}));function n(e){if(void 0===e)return(0,a.jsx)(o,{});t="function"==typeof e?e(t):e,r.forEach((function(e){e()}))}var i=(0,u.createContext)(n);return[n,(0,u.memo)((function(){return(0,a.jsx)(i.Provider,{value:n})})),function(){return(0,u.useContext)(i)}]};return n})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-reactive-val",
-  "version": "1.0.5",
+  "version": "2.0.0",
   "description": "A lightweight, type-safe reactive value management library for React applications",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -22,10 +22,22 @@
     "build": "rm -rf dist && npm run build:types && npm run build:webpack",
     "prepublishOnly": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "eslint . --ext .ts,.tsx",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
+    "lint-staged": "lint-staged",
     "prepare": "husky install"
   },
+  "lint-staged": {
+    "src/**/*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md}": [
+      "prettier --write"
+    ]
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/jatin-parate/react-reactive-val.git"
@@ -58,6 +70,7 @@
     "babel-loader": "^9.1.3",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.4.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^9.1.7",
@@ -68,11 +81,5 @@
     "typescript": "^5.8.3",
     "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4"
-  },
-  "lint-staged": {
-    "*.{ts,tsx}": [
-      "eslint --fix",
-      "prettier --write"
-    ]
   }
 }