{"_id":"@abw/react-model","_rev":"2-cea89475bc296a1021315199da24af53","name":"@abw/react-model","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@abw/react-model","version":"1.0.0","keywords":["react","context","state","model"],"author":{"name":"Andy Wardley"},"license":"ISC","_id":"@abw/react-model@1.0.0","maintainers":[{"name":"abw","email":"abw@wardley.org"}],"homepage":"https://github.com/abw/react-model#readme","bugs":{"url":"https://github.com/abw/react-model/issues"},"dist":{"shasum":"9b1666b3af3e9f0aa13804bd3ce19637df808fc6","tarball":"https://registry.npmjs.org/@abw/react-model/-/react-model-1.0.0.tgz","fileCount":8,"integrity":"sha512-g8YF5Pux85vcF9REcc8EyOgWoyFgsqDyNgNyvsJtvIq9bHDC9UOKSWmrak6HRz6xN2DpGPZ8UiLCUiPFr3aalw==","signatures":[{"sig":"MEYCIQDL8QhCncTF1DCxV2lx98N5JtNq0TuC4rS/dkB0soIgwwIhAPBhcDBYEm890HZoGqChdekEAEoxF89osRC4Nb5iRkX7","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9948},"main":"./dist/react-model.umd.cjs","type":"module","_from":"file:abw-react-model-1.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/react-model.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/react-model.js"},"require":"./dist/react-model.umd.cjs"}},"scripts":{"dev":"vite --config vite.docs.js","lint":"eslint","test":"vitest --ui","build":"$npm_execpath build:lib && $npm_execpath build:docs","preview":"vite preview --config vite.docs.js","build:lib":"tsc && vite build","build:docs":"vite build --config vite.docs.js"},"_npmUser":{"name":"abw","email":"abw@wardley.org"},"_resolved":"/private/var/folders/jw/y_b__hgj1n39hh2qgp9s8dnc0000gn/T/9fd8991b9f4956d6d41eb2476fc5971b/abw-react-model-1.0.0.tgz","_integrity":"sha512-g8YF5Pux85vcF9REcc8EyOgWoyFgsqDyNgNyvsJtvIq9bHDC9UOKSWmrak6HRz6xN2DpGPZ8UiLCUiPFr3aalw==","repository":{"url":"git+https://github.com/abw/react-model.git","type":"git"},"_npmVersion":"10.2.3","description":"Simple application data model using React context","directories":{},"_nodeVersion":"20.10.0","_hasShrinkwrap":false,"devDependencies":{"sass":"=1.78.0","vite":"^5.4.14","jsdom":"^24.1.3","eslint":"^9.21.0","vitest":"^2.1.9","globals":"^15.15.0","@vitest/ui":"^2.1.9","typescript":"^5.7.3","@types/react":"^19.0.0","@mdx-js/react":"^3.1.0","@mdx-js/rollup":"^3.1.0","vite-plugin-dts":"^4.5.0","@types/react-dom":"^19.0.0","react-router-dom":"^6.29.0","vite-plugin-svgr":"^4.3.0","@abw/badger-utils":"^1.2.4","typescript-eslint":"^8.24.1","@abw/badger-website":"^0.3.3","eslint-plugin-react":"^7.37.4","vite-tsconfig-paths":"^5.1.4","@abw/badger-react-ui":"^1.3.13","@testing-library/dom":"^10.4.0","@vitejs/plugin-react":"^4.3.4","@abw/badger-timestamp":"^1.2.1","rehype-mdx-code-props":"^3.0.1","@abw/badger-filesystem":"^1.2.1","@testing-library/react":"^16.2.0","react-syntax-highlighter":"^15.6.1","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.1.0","@testing-library/user-event":"^14.6.1","eslint-plugin-react-refresh":"^0.4.19"},"peerDependencies":{"react":"^18.2.0 || 19.0.0","react-dom":"^18.2.0 || 19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-model_1.0.0_1740483665012_0.6976249764550573","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@abw/react-model","version":"1.0.1","description":"Simple application data model using React context","type":"module","main":"./dist/react-model.umd.cjs","module":"./dist/react-model.js","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/react-model.umd.cjs","import":{"types":"./dist/index.d.ts","default":"./dist/react-model.js"}}},"author":{"name":"Andy Wardley"},"license":"ISC","keywords":["react","context","state","model"],"repository":{"type":"git","url":"git+https://github.com/abw/react-model.git"},"bugs":{"url":"https://github.com/abw/react-model/issues"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0"},"devDependencies":{"@abw/badger-filesystem":"^1.2.1","@abw/badger-react-ui":"^1.3.13","@abw/badger-timestamp":"^1.2.1","@abw/badger-utils":"^1.2.4","@abw/badger-website":"^0.3.3","@mdx-js/react":"^3.1.0","@mdx-js/rollup":"^3.1.0","@testing-library/dom":"^10.4.0","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.2.0","@testing-library/user-event":"^14.6.1","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.3.4","@vitest/ui":"^2.1.9","eslint":"^9.21.0","eslint-plugin-react":"^7.37.4","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19","globals":"^15.15.0","jsdom":"^24.1.3","react-router-dom":"^6.29.0","react-syntax-highlighter":"^15.6.1","rehype-mdx-code-props":"^3.0.1","sass":"=1.78.0","typescript":"^5.7.3","typescript-eslint":"^8.24.1","vite":"^5.4.14","vite-plugin-dts":"^4.5.0","vite-plugin-svgr":"^4.3.0","vite-tsconfig-paths":"^5.1.4","vitest":"^2.1.9"},"scripts":{"dev":"vite --config vite.docs.js","test":"vitest --ui","build":"$npm_execpath build:lib && $npm_execpath build:docs","build:lib":"tsc && vite build","build:docs":"vite build --config vite.docs.js","preview":"vite preview --config vite.docs.js","lint":"eslint"},"homepage":"https://github.com/abw/react-model#readme","_id":"@abw/react-model@1.0.1","_integrity":"sha512-8gd7JLGmFWVsUXLMRs2SUashKg9NMeOnvZtwpBLT/C8TnWLweUeMjIJ6KzD/+gaj8qqy+ysWt11Aui/Ft+qVXw==","_resolved":"/private/var/folders/jw/y_b__hgj1n39hh2qgp9s8dnc0000gn/T/af9fd626c2f5d98e55ff0b868f3ddf62/abw-react-model-1.0.1.tgz","_from":"file:abw-react-model-1.0.1.tgz","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-8gd7JLGmFWVsUXLMRs2SUashKg9NMeOnvZtwpBLT/C8TnWLweUeMjIJ6KzD/+gaj8qqy+ysWt11Aui/Ft+qVXw==","shasum":"6af48f24bc86cfaef54dbe591dd064e92be59c3f","tarball":"https://registry.npmjs.org/@abw/react-model/-/react-model-1.0.1.tgz","fileCount":8,"unpackedSize":9950,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDJ9dGcdpcouyVttYF+3iwSlQoCKEwrbETmTdgbDxQLaAIhAPlPCP4k1H3kZP7in/Ac5P+NBLLiHLh//bCFbh+t2+X0"}]},"_npmUser":{"name":"abw","email":"abw@wardley.org"},"directories":{},"maintainers":[{"name":"abw","email":"abw@wardley.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-model_1.0.1_1746196576575_0.31682159561195355"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-25T11:41:04.948Z","modified":"2025-05-02T14:36:16.987Z","1.0.0":"2025-02-25T11:41:05.177Z","1.0.1":"2025-05-02T14:36:16.769Z"},"bugs":{"url":"https://github.com/abw/react-model/issues"},"author":{"name":"Andy Wardley"},"license":"ISC","homepage":"https://github.com/abw/react-model#readme","keywords":["react","context","state","model"],"repository":{"type":"git","url":"git+https://github.com/abw/react-model.git"},"description":"Simple application data model using React context","maintainers":[{"name":"abw","email":"abw@wardley.org"}],"readme":"# react-model\n\n## Introduction\n\nThis is a small and simple module that simplifies the process of creating a\nstate model for your application or widgets using a React Context.\n\nIt's written in Typescript and provides full (and mostly automatic) type\nsafety for your data.\n\nIf you're not already familiar with React Context then you should start by\nreading the React Context documentation: https://react.dev/reference/react/useContext\n\n## Getting Started\n\nAdd the `@abw/react-model` module to your project using your favourite\npackage manager.\n\n```bash\n## using npm\n$ npm add @abw/react-model\n\n## using yarn\n$ yarn add @abw/react-model\n\n## using pnpm\n$ pnpm add @abw/react-model\n```\n\nYou can then import the module and start using it.\n\n```jsx\nimport { Model } from '@abw/react-model'\n```\n\n## Documentation\n\nVisit the [documentation](https://badgerpower.com/react-model/) web site\nfor detailed documentation.\n\n## Example\n\nFirst create a model function. It can accept an optional object of properties\nfor configuration items. It should return an object containing any model data,\nfunctions, etc. that you want to share. This example is a variation of the\ncounter example that is the \"Hello World!\" of React state modules. In this\ncase, we'll model a simple volume control.\n\nPass your model function to the `Model` higher order component. This will\nreturn an object containing a `Provider`, `Consumer` and a `Use` hook.\nIt's considered best practice to rename the `Use` hook to match the accepted\nnaming convention (i.e. `useSomething`). In this example, we call it\n`useVolume`.\n\n```js\nimport { Model } from '@abw/react-model'\nimport { useState } from 'react'\n\nconst Volume = ({\n // optional initial volume\n initialVolume = 0,\n}) => {\n // volume state variable and setter\n const [volume, setVolume] = useState(initialVolume)\n\n // return an object containing the state data we want to expose\n return {\n volume, setVolume\n }\n}\n\n// Wrap it all up using the Model higher order component to get a\n// Provider, Consumer and Use hook (aliased to useVolume).\nexport const {\n Provider,\n Consumer,\n Use: useVolume\n} = Model(Volume)\n```\n\nYou can then call the `useVolume` hook in any component to access the\nmodel data.\n\n```tsx\nimport { useVolume } from './Volume'\n\nconst Amplifier = () => {\n const { volume, setVolume } = useVolume()\n return (\n
\n
Volume is {volume}
\n \n
\n )\n}\n```\n\nYou can also use the `Consumer` higher order component to wrap your components.\nIn this case they will receive the model data items as properties.\n\n```tsx\nimport { Consumer } from './Volume'\n\nexport const Amplifier = Consumer(\n ({ volume, setVolume }) =>\n