{"id":32392812,"url":"https://gitlab.com/eidheim/react-simplified","last_synced_at":"2025-10-25T05:19:25.711Z","repository":{"id":58446238,"uuid":"6863031","full_name":"eidheim/react-simplified","owner":"eidheim","description":"Easier React programming","archived":false,"fork":false,"pushed_at":null,"size":null,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":null,"default_branch":"master","last_synced_at":"2025-08-17T10:41:35.539Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":null,"metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-06T06:59:10.899Z","updated_at":"2024-08-27T10:06:25.208Z","dependencies_parsed_at":"2022-09-11T11:22:41.775Z","dependency_job_id":null,"html_url":"https://gitlab.com/eidheim/react-simplified","commit_stats":null,"previous_names":[],"tags_count":4,"template":null,"template_full_name":null,"purl":"pkg:gitlab/eidheim/react-simplified","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/eidheim%2Freact-simplified","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/eidheim%2Freact-simplified/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/eidheim%2Freact-simplified/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/eidheim%2Freact-simplified/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/owners/eidheim","download_url":"https://gitlab.com/eidheim/react-simplified/-/archive/master/react-simplified-master.zip","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/eidheim%2Freact-simplified/sbom","scorecard":null,"host":{"name":"gitlab.com","url":"https://gitlab.com","kind":"gitlab","repositories_count":4521208,"owners_count":7275,"icon_url":"https://github.com/gitlab.png","version":null,"created_at":"2022-05-30T11:31:42.605Z","updated_at":"2024-07-18T11:24:13.055Z","status":"online","status_checked_at":"2025-10-24T02:00:06.808Z","response_time":372,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.382Z","robots_txt_url":"https://gitlab.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/owners"}},"keywords":[],"created_at":"2025-10-25T05:19:22.277Z","updated_at":"2025-10-25T05:19:25.704Z","avatar_url":null,"language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-simplified\n\nImplements automatic state and props management for React components using\n[ES6 Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)\nand the [@nx-js/observer-util](https://github.com/nx-js/observer-util) library.\n\n## Features\n\n- Rerenders a component if a member variable changes that affects renderering\n- Can create shared data between components, through the `sharedComponentData()` function, that\n  rerenders affected components when altered\n- Calls `componentWillUnmount()` and `componentDidMount()` when props used in `componentDidMount()`\n  changes\n- Auto-binds component methods\n- Static methods `instance()` and `instances()` that simplifies static method implementations\n- Can use lifecycle hooks `mounted()`, `updated()` and `beforeUnmount()` instead of\n  `componentDidMount()`, `componentDidUpdate()` and `componentWillUnmount()`\n- Detects use of undefined member variables that can cause issues in `render()`\n- Works with React Native\n- Both Flow and TypeScript supported\n\n## Installation\n\n```sh\nnpm install react-simplified\n```\n\n## Examples\n\nExample showing updated date and time:\n\n```jsx\nimport React from 'react';\nimport { Component } from 'react-simplified';\nimport { createRoot } from 'react-dom/client';\n\nclass App extends Component {\n  date = new Date();\n\n  render() {\n    return \u003cdiv\u003e{this.date.toString()}\u003c/div\u003e;\n  }\n\n  mounted() {\n    setInterval(() =\u003e (this.date = new Date()), 1000);\n  }\n}\n\ncreateRoot(document.getElementById('root')).render(\u003cApp /\u003e);\n```\n\nExample with data shared between two components:\n\n```jsx\nimport React from 'react';\nimport { Component, sharedComponentData } from 'react-simplified';\nimport { createRoot } from 'react-dom/client';\n\nconst shared = sharedComponentData({ date: new Date() });\nsetInterval(() =\u003e (shared.date = new Date()), 1000);\n\nclass Component1 extends Component {\n  render() {\n    return \u003cdiv\u003e{shared.date.toString()}\u003c/div\u003e;\n  }\n}\n\nclass Component2 extends Component {\n  render() {\n    return \u003cdiv\u003e{shared.date.toString()}\u003c/div\u003e;\n  }\n}\n\ncreateRoot(document.getElementById('root')).render(\n  \u003c\u003e\n    \u003cComponent1 /\u003e\n    \u003cComponent2 /\u003e\n  \u003c/\u003e,\n);\n```\n\nA larger example where a class instance, simulating loading and storing data, is shared and used by\ntwo components:\n\n```jsx\nimport React from 'react';\nimport { Component, sharedComponentData } from 'react-simplified';\nimport { createRoot } from 'react-dom/client';\n\nclass ItemStore {\n  items = [];\n  pending = true;\n\n  load() {\n    return new Promise((resolve) =\u003e {\n      this.pending = true;\n      // Simulate time-consuming task\n      setTimeout(() =\u003e {\n        this.items = ['Orange', 'Apple', 'Lemon'];\n        this.pending = false;\n        resolve();\n      }, 500);\n    });\n  }\n\n  add(item) {\n    return new Promise((resolve) =\u003e {\n      this.pending = true;\n      // Simulate time-consuming task\n      setTimeout(() =\u003e {\n        this.items.push(item);\n        this.pending = false;\n        resolve();\n      }, 500);\n    });\n  }\n\n  clear() {\n    return new Promise((resolve) =\u003e {\n      this.pending = true;\n      // Simulate time-consuming task\n      setTimeout(() =\u003e {\n        this.items = [];\n        this.pending = false;\n        resolve();\n      }, 500);\n    });\n  }\n}\nconst itemStore = sharedComponentData(new ItemStore());\n\nclass ItemForm extends Component {\n  newItem = '';\n\n  setNewItem(event) {\n    this.newItem = event.currentTarget.value;\n  }\n\n  addNewItem() {\n    itemStore.add(this.newItem).then(() =\u003e (this.newItem = ''));\n  }\n\n  render() {\n    return (\n      \u003cfieldset disabled={itemStore.pending}\u003e\n        \u003cinput type=\"text\" value={this.newItem} onChange={this.setNewItem} /\u003e\n        \u003cbutton onClick={this.addNewItem}\u003eAdd item\u003c/button\u003e\n        \u003cbutton onClick={itemStore.clear}\u003eClear items\u003c/button\u003e\n      \u003c/fieldset\u003e\n    );\n  }\n}\n\nclass ItemList extends Component {\n  render() {\n    return (\n      \u003cdiv style={{ opacity: itemStore.pending ? '0.5' : '1.0' }}\u003e\n        \u003cul\u003e\n          {itemStore.items.map((item, i) =\u003e (\n            \u003cli key={i}\u003e{item}\u003c/li\u003e\n          ))}\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  mounted() {\n    itemStore.load();\n  }\n}\n\ncreateRoot(document.getElementById('root')).render(\n  \u003c\u003e\n    \u003cItemForm /\u003e\n    \u003cItemList /\u003e\n  \u003c/\u003e,\n);\n```\n\nSee\n[examples/src/index.js](https://gitlab.com/eidheim/react-simplified/blob/master/examples/src/index.js)\nfor additional code samples. These examples can be run from a terminal:\n\n```sh\ngit clone https://gitlab.com/eidheim/react-simplified\ncd react-simplified/examples\nnpm install\nnpm start\n```\n\n## Documentation\n\nDocumentation can be found in the library definitions for\n[Flow](https://gitlab.com/eidheim/react-simplified/blob/master/src/index.js.flow) and\n[TypeScript](https://gitlab.com/eidheim/react-simplified/blob/master/src/index.d.ts).\n\n## Contributing\n\nContributions are welcome, either by creating an issue or a merge request. However, before you\ncreate a new issue or merge request, please search for previous similar issues or requests. A\nresponse will normally be given within a few days.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/gitlab.com%2Feidheim%2Freact-simplified","html_url":"https://awesome.ecosyste.ms/projects/gitlab.com%2Feidheim%2Freact-simplified","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/gitlab.com%2Feidheim%2Freact-simplified/lists"}