{"id":13400970,"url":"https://github.com/fdecampredon/rx-react","last_synced_at":"2025-12-16T23:58:01.295Z","repository":{"id":21362045,"uuid":"24679262","full_name":"fdecampredon/rx-react","owner":"fdecampredon","description":"ReactJS bindings for RxJS","archived":false,"fork":false,"pushed_at":"2016-10-11T21:15:12.000Z","size":5378,"stargazers_count":620,"open_issues_count":10,"forks_count":32,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-10-04T11:51:27.618Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fdecampredon.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2014-10-01T13:24:39.000Z","updated_at":"2025-08-25T16:29:11.000Z","dependencies_parsed_at":"2022-08-21T05:40:55.393Z","dependency_job_id":null,"html_url":"https://github.com/fdecampredon/rx-react","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/fdecampredon/rx-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fdecampredon%2Frx-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fdecampredon%2Frx-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fdecampredon%2Frx-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fdecampredon%2Frx-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fdecampredon","download_url":"https://codeload.github.com/fdecampredon/rx-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fdecampredon%2Frx-react/sbom","scorecard":{"id":394771,"data":{"date":"2025-08-11","repo":{"name":"github.com/fdecampredon/rx-react","commit":"c86411a5dbeee4a8fb08ea8655a3bf2cc32a6d9c"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.5,"checks":[{"name":"Code-Review","score":1,"reason":"Found 4/29 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"SAST","score":-1,"reason":"internal error: internal error: Client.Checks.ListCheckRunsForRef: error during graphqlHandler.setupCheckRuns: non-200 OK status code: 502 Bad Gateway body: \"\u003chtml\u003e\\r\\n\u003chead\u003e\u003ctitle\u003e502 Bad Gateway\u003c/title\u003e\u003c/head\u003e\\r\\n\u003cbody\u003e\\r\\n\u003ccenter\u003e\u003ch1\u003e502 Bad Gateway\u003c/h1\u003e\u003c/center\u003e\\r\\n\u003chr\u003e\u003ccenter\u003enginx\u003c/center\u003e\\r\\n\u003c/body\u003e\\r\\n\u003c/html\u003e\\r\\n\"","details":null,"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-18T18:42:58.571Z","repository_id":21362045,"created_at":"2025-08-18T18:42:58.571Z","updated_at":"2025-08-18T18:42:58.571Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27773318,"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","status":"online","status_checked_at":"2025-12-16T02:00:10.477Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-07-30T19:00:57.481Z","updated_at":"2025-12-16T23:58:01.274Z","avatar_url":"https://github.com/fdecampredon.png","language":"JavaScript","readme":"# RxReact\n\n\u003e  [ReactJS](http://facebook.github.io/react/) bindings for [RxJS](https://github.com/Reactive-Extensions/RxJS)\n\n\n# Installation\n\nInstall this module with npm: \n\n```\nnpm install rx-react\n```\n\n# Usage: \n\nRxReact provides a set of utilities to work with RxJS and React : \n\n* The `StateStreamMixin`\n* The `LifecycleMixin`\n* The `PropsMixin`\n* The `RxReact.Component` base class\n* The `FuncSubject` helper\n\n\n\n## StateStreamMixin\n\nThe `StateStreamMixin` allows to bind a component state to an RxJS `Observable` stream. \nThe way to achieve the binding is to provide a `getStateStream` method on your component that returns an RxJS `Observable`, the `StateStream` mixin will automatically merge the state of your component with the values published by the returned observable. The subscription will be automaticly cleaned on component unmount.\n\nExample: \n\n```javascript\nvar StateStreamMixin = require('rx-react').StateStreamMixin;\nvar React = require('react');\nvar Rx = require('rx');\n\n\nvar Timer = React.createClass({\n  mixins: [StateStreamMixin],\n  getStateStream: function () {\n    return Rx.Observable.interval(1000).map(function (interval) {\n      return {\n        secondsElapsed: interval\n      };\n    });\n  },\n  render: function () {\n    var secondsElapsed = this.state ? this.state.secondsElapsed : 0;\n    return (\n      \u003cdiv\u003eSeconds Elapsed: {secondsElapsed}\u003c/div\u003e\n    );\n  }\n});\n\nReact.render(\u003cTimer /\u003e, document.getElementById('timer-holder'));\n```\n\n\n## LifecycleMixin\n\nThe `LifecycleMixin` allows you to consume React components lifecycle events as RxJS `Observable`.\nThe `LifecycleMixin` will inject a property `lifecycle` to the component, that property contains an observable for each lifecycle events.\n\nExample : \n\n```javascript\nvar LifecycleMixin = require('rx-react').LifecycleMixin;\nvar React = require('react');\nvar Rx = require('rx');\n\n\nvar Component = React.createClass({\n  mixins: [LifecycleMixin],\n  componentWillMount: function () {\n    this.lifecycle.componentDidMount.subscribe(function () {\n      console.log('componentDidMount');\n    });\n    \n    this.lifecycle.componentWillReceiveProps.subscribe(function (props) {\n      console.log('componentWillReceiveProps : ' JSON.stringify(props));\n    });\n    \n    this.lifecycle.componentWillUpdate.subscribe(function ({nextProps, nextState}) {\n      console.log('componentWillUpdate : ' JSON.stringify({nextProps, nextState}));\n    });\n    \n    this.lifecycle.componentDidUpdate.subscribe(function ({prevProps, prevState}) {\n      console.log('componentDidUpdate : ' JSON.stringify({prevProps, prevState}));\n    });\n    this.lifecycle.componentWillUnmount.subscribe(function () {\n      console.log('componentWillUnmount');\n    });\n  },\n  render: function() {\n    //...\n  }\n});\n```\n\n## PropsMixin\n\nThe `PropsMixin` allows to obtain a stream of props as RxJS `Observable` for your component.\nExample : \n\n```javascript\nvar PropsMixin = require('rx-react').PropsMixin;\nvar React = require('react');\n\n\nvar Component = React.createClass({\n  mixins: [PropsMixin],\n  componentWillMount: function () {\n    this.propsStream.subscribe(function (props) {\n      console.log(props.message);\n    }\n  },\n  render: function() {\n    //...\n  }\n});\n\nvar comp = React.render(\u003cComponent message='Hello World!' /\u003e, domNode); // log 'Hello World!'\ncomp.setProps({message: 'Hello John'}); // log 'Hello John'\n```\nThis is particulary useful in combination with the `StateStreamMixin` when your component states depends on Props.\n\n\n## Component\n\nThe `RxReact.Component` is a base class combining the behavior of the `PropsStreamMixin` and the `StateStreamMixin`.\nIt extends `React.Component`.\nExample: \n\n```javascript\nvar RxReact = require('rx-react');\nvar Rx = require('rx');\n\nclass MyComponent extends RxReact.Component {\n  getStateStream() {\n    return Rx.Observable.interval(1000).map(function (interval) {\n      return {\n        secondsElapsed: interval\n      };\n    });\n  }\n  \n  render() {\n    var secondsElapsed = this.state ? this.state.secondsElapsed : 0;\n    return (\n      \u003cdiv\u003eSeconds Elapsed: {secondsElapsed}\u003c/div\u003e\n    );\n  }\n}\n```\nNote that when you extend lifecycle methods, you must call the `super` method.\n\n\u003e Before the 0.3.x versions `RxReact.Component` also implemented lifecyle mixin behavior, for some perf reasons and because most of the time it's unnecessary this has been removed. \n\u003e If you want reenable this behavior  use `FuncSubject` as lifecycle method, or manually apply the `LifecycleMixin` on your class.\n\n## FuncSubject\n\nThe `FuncSubject` helper allows to create an RxJS `Observable` that can be injected as callback for React event handlers, refs, etc...\nTo create an handler use the `create` function of `FuncSubject`\n\n```javascript\nvar myHandler = FuncSubject.create()\n```\n\nExample: \n\n```javascript\nvar FuncSubject = require('rx-react').FuncSubject;\nvar React = require('react');\nvar Rx = require('rx');\n\n\nvar Button = React.createClass({\n  componentWillMount: function () {\n    this.buttonClicked = FuncSubject.create();\n    \n    this.buttonClicked.subscribe(function (event) {\n      alert('button clicked');\n    })\n  },\n  render: function() {\n    return \u003cbutton onClick={this.buttonClicked} /\u003e\n  }\n});\n```\n\n`FuncSubject` also accept a function as argument,  if provided this funtion will be used to map the value of each elements.\nThis function will *always* be called even if the `FuncSubject` has no subscription.\n\n```javascript\nvar FuncSubject = require('rx-react').FuncSubject;\nvar React = require('react');\nvar Rx = require('rx');\n\n\nvar MyComponent = React.createClass({\n  componentWillMount: function () {\n    this.inputValue = FuncSubject.create(function (event) {\n      return event.target.value\n    });\n    \n    this.inputValue.subscribe(function (value) {\n      alert('inputValue changed :' + value);\n    })\n  },\n  render: function() {\n    return \u003cinput onChange={this.inputValue} /\u003e\n  }\n});\n```\n\n### FuncSubject.behavior\n\nYou can also create a `FuncSubject` that extends [`BehaviorSubject`](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md). simply use the `behavior` function exposed by `FuncSubject`: \n\n\n```javascript\nvar subject = FuncSubject.behavior(intialValue, mapFunction)\n```\n\n\n### FuncSubject.async\n\nYou can also create a `FuncSubject` that extends [`AsyncSubject`](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/asyncsubject.md). simply use the `async` function exposed by `FuncSubject`: \n\n\n```javascript\nvar subject = FuncSubject.async(mapFunction)\n```\n\n### FuncSubject.replay\n\nYou can also create a `FuncSubject` that extends [`ReplaySubject`](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/replaysubject.md). simply use the `replay` function exposed by `FuncSubject`: \n\n\n```javascript\nvar subject = FuncSubject.replay(bufferSize, mapFunction)\n```\n\n### FuncSubject.replay\n\nYou can create a `FuncSubject` from any subject base class using the `factory` function expsed by `FuncSubject`: \n\n\n```javascript\nvar subject = FuncSubject.factory(SubjectClass, mapFunction, ...constructorArgs);\n```\n","funding_links":[],"categories":["Uncategorized","Awesome React","JavaScript","React [🔝](#readme)"],"sub_categories":["Uncategorized","Tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffdecampredon%2Frx-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffdecampredon%2Frx-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffdecampredon%2Frx-react/lists"}