{"id":21853644,"url":"https://github.com/incetarik/react-mobx-observed","last_synced_at":"2026-05-05T15:32:16.465Z","repository":{"id":57334696,"uuid":"246031079","full_name":"incetarik/react-mobx-observed","owner":"incetarik","description":"`@observed` decorator for MobX and React/React-Native projects.","archived":false,"fork":false,"pushed_at":"2020-03-09T16:02:05.000Z","size":25,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-26T22:39:11.902Z","etag":null,"topics":["decorated-properties","decorator","mobx","observable","react","react-native","rxjs"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/incetarik.png","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":"2020-03-09T12:34:38.000Z","updated_at":"2024-01-24T14:35:22.000Z","dependencies_parsed_at":"2022-09-11T01:51:12.312Z","dependency_job_id":null,"html_url":"https://github.com/incetarik/react-mobx-observed","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/incetarik/react-mobx-observed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/incetarik%2Freact-mobx-observed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/incetarik%2Freact-mobx-observed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/incetarik%2Freact-mobx-observed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/incetarik%2Freact-mobx-observed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/incetarik","download_url":"https://codeload.github.com/incetarik/react-mobx-observed/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/incetarik%2Freact-mobx-observed/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260985197,"owners_count":23092888,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["decorated-properties","decorator","mobx","observable","react","react-native","rxjs"],"created_at":"2024-11-28T01:26:02.548Z","updated_at":"2026-05-05T15:32:11.443Z","avatar_url":"https://github.com/incetarik.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-mobx-observed\n`@observed` decorator for MobX and React/React-Native projects.\n\nThis package adds `@observed` decorator to your environment. Utilizes `mobx`, `rxjs` and `react` packages.\n\n`@observed` decorator is used for properties to automatically update them according to provided observable.\nAdditionally, you can pass the source as observable returning function, which will be called with related `React.Component` class' instance as `this`.\nThe returned observable will be used as the source for the decorated property.\n\nThere is also a setting for marking the source observable returning function as computed, hence whenever the dependent value changes, the observable is re-subscribed and the emitted values are assigned to the property.\n\nApart from the source function, you can specify another computed function which will cause the re-subscription to the source observable.\n\nYou can also list several properties your component class has and whenever they change, the source observable will be re-subscribed.\n\nLikewise, you can also select when to assign a value when it is emitted from the source observable.\n\nThere is also a function to determine whether the property should be updated or not. This will have arguments given by `shouldComponentUpdate` function of `React.Component` and will be bound to the instance. Hence, you can reach class properties as `this.`.\n\nLastly, there is side-effect property of this decorator which allows you to update several other properties of the class while it is still updating the decorated properties.\n\nThis decorator is also adds a function to the class called `loadData`. This is for manual calls.\n\nThis library uses `WeakMap`s to prevent modifications on the instance.\n\nIf your component has functions `setError(error)` and `clearError()` for error reporting, and `startLoading()`, `stopLoading()` for loading state changes, they will be called automatically.\nSo you can update your views accordingly.\n\n\n# Examples\n```ts\n@observer\nclass VideoCommentsView extends React.PureComponent\u003c{ video: IVideo }\u003e {\n  @observed({\n    // Whenever the property `video` changes\n    onPropsChange: 'video',\n    // Or whenever any change happens on `comments` property of the `video`\n    computedBy(this: VideoCommentsView) { return this.props.video.comments },\n    // Load the comments of the video (returns an Observable)\n    source(this: VideoCommentsView) { return loadCommentsOf$(this.props.video) }\n  })\n  readonly comments!: IVideoComment[] // Readonly because the property will be updated automatically.\n\n  @observed({ source: likes$ })\n  readonly likes!: IVideoLike[]\n\n  @observed({\n    // Source is computed, which means that whenever the viewState.currentVideo (observable) changes, the source will be subscribed again.\n    isSourceComputed: true,\n    source() { return getOwner$(viewState.currentVideo) }\n  })\n  readonly owner!: IVideoOwner\n\n  @observed({\n    // Whenever the `video` or `videoSources` change\n    onPropsChange: [ 'video', 'videoSources' ],\n    source(this: VideoCommentsView) {\n      // Assume this observable emits value as\n      // { name: string, value: any }\n      // where name is the event name and the value is event value\n      return getSourceInfo$(this.props.video)\n    },\n    select(data) {\n      // Select (to assign to the property) when data.name is source\n      // and the value to assign will be the `data.value`\n      // If `data.name` is not source, then skip this\n      return { select: data.name === 'source', value: data.value }\n    },\n    makeSideEffects(data) {\n      // While the source is extracting, it may send information\n      // such as the thumbnail, and assume we also want to update\n      // the thumbnail information.\n\n      // If the emitted event name is not `thumbnail`, skip.\n      if (data.name !== 'thumbnail') { return }\n\n      // Otherwise, assign the `thumbnail` property of this class, as `data.value`\n      return { thumbnail: data.value }\n    }\n    readonly source!: string\n\n    // This will be updated whenever source is being updated as a side-effect of updating source.\n    @observable readonly thumbnail!: string\n  })\n\n  render() {\n    return (\n      \u003cView\u003e\n        {this.comments.map(comment =\u003e \u003cVideoComment model={comment}/\u003e)}\n      \u003c/View\u003e\n    )\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fincetarik%2Freact-mobx-observed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fincetarik%2Freact-mobx-observed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fincetarik%2Freact-mobx-observed/lists"}