{"id":19055750,"url":"https://github.com/taskrabbit/react-component-extension","last_synced_at":"2025-10-07T12:46:57.380Z","repository":{"id":66227822,"uuid":"45724207","full_name":"taskrabbit/react-component-extension","owner":"taskrabbit","description":"Namespaced Higher Order Components","archived":false,"fork":false,"pushed_at":"2015-12-17T07:39:28.000Z","size":17,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-09-06T12:46:48.115Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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":"https://github.com/taskrabbit.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":"2015-11-07T05:41:46.000Z","updated_at":"2016-05-08T01:37:16.000Z","dependencies_parsed_at":"2023-02-20T00:30:51.609Z","dependency_job_id":null,"html_url":"https://github.com/taskrabbit/react-component-extension","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/taskrabbit/react-component-extension","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taskrabbit%2Freact-component-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taskrabbit%2Freact-component-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taskrabbit%2Freact-component-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taskrabbit%2Freact-component-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taskrabbit","download_url":"https://codeload.github.com/taskrabbit/react-component-extension/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taskrabbit%2Freact-component-extension/sbom","scorecard":{"id":869346,"data":{"date":"2025-08-11","repo":{"name":"github.com/taskrabbit/react-component-extension","commit":"e72df2c860797e7367453c3574eaf9e9b0ad99f6"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.5,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/23 approved changesets -- score normalized to 0","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":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"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":"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":"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":"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":"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":"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":"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":"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":"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":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: 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":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"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"}}]},"last_synced_at":"2025-08-24T03:40:11.846Z","repository_id":66227822,"created_at":"2025-08-24T03:40:11.847Z","updated_at":"2025-08-24T03:40:11.847Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278577923,"owners_count":26009701,"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-10-06T02:00:05.630Z","response_time":65,"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-11-08T23:46:52.464Z","updated_at":"2025-10-07T12:46:57.344Z","avatar_url":"https://github.com/taskrabbit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Since [mixins are dead](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.jqp1e0of3), higher order components are the way to go.\n\nBut when you use multiple higher order component for a Component it can be confusing, you have to think about where the behavior comes from.\n\nAn Extension is namespaced and also explicit about what are the methods/variables that are be provided to the Component.\n\n## To create an Extension:\n\nHere we are defining a `UserConnection` extension, it allows to get the user information it allows you to call in your component, `this.props['UserConnection'].variables.firstName` and `this.props['UserConnection'].variables.lastName`.\nIf you want to refresh the user simply call `this.props['UserConnection'].refresh()`.\nYou can pass `accountUrl` and `updateAccountUrl` as params of the Extension.\n\n```javascript\nimport * as Extension from 'react-component-extension';\n\nconst UserConnection = {\n  // This is the public name of the Extension\n  extensionName: 'UserConnection',\n  exports: {\n    // Variables accessibles from the Extension\n    variables: ['firstName', 'lastName'],\n    // Methods callable on the Extension\n    methods: ['refresh'],\n  },\n  // Required params to use the extension\n  // should be an object key: 'description'\n  requiredParams: {\n    accountUrl: 'url to fetch the user',\n  },\n  optionalParams: {\n    updateAccountUrl: 'url to update the user',\n  },\n}\n\nexport default Extension.create(UserConnection);\n```\n\n## To use the Extension:\n\n```javascript\nclass Account extends React.Component {\n  render() {\n    \u003cdiv\u003e\n      hello {this.props['UserConnection'].variables.firstName}\n      click \u003cbutton onClick={this.props['UserConnection'].refresh}\u003ehere\u003c/button\u003e to refresh\n    \u003c/div\u003e\n  }\n}\n\nexport default UserConnection(AccountPage, {\n  accountUrl: 'api/account'\n});\n```\n\n\n## Other Examples\n\n```javascript\nconst AddSpinningLoader = {\n  extensionName: 'AddSpinningLoader',\n\n  exports: {\n    methods: ['start', 'stop']\n  },\n\n  getInitialState() {\n    return {\n      loading: false,\n    }\n  },\n\n  start() {\n    this.setState({loading: true})\n  },\n\n  stop() {\n    this.setState({loading: false})\n  },\n\n  renderExtension() {\n    let spinningLoader = this.state.loading ? \u003cSpinningLoader/\u003e : null;\n\n    return (\n      \u003cdiv\u003e\n        {spinningLoarder}\n        {this.renderComponent()}\n      \u003c/div\u003e\n    )\n  }  \n};\n\nexport default Extension.create(AddSpinningLoader);\n```\n\n```javascript\n@AddSpinningLoader\nclass Form extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.onSubmitButton = this.onSubmitButton.bind(this);\n\n    this.state = {\n      firstName: ''\n    };\n  }\n\n  onSubmitButton() {\n    this.props['ValidationErrorBar'].validateOrShowBar().then(\n      this.doAccountUpdate\n    );\n  }\n\n  doAccountUpdate() {\n    this.props['AddSpinningLoader'].start();\n\n    $.post('api/account_update', {\n      firstName: this.state.firstName\n    }).then(\n      this.props['AddSpinningLoader'].stop\n    );\n  }\n\n  render() {\n    \u003cdiv\u003e\n      \u003cinput type=\"text\" value={this.state.firstName} onChange={(firstName) =\u003e this.setState({firstName})} /\u003e;\n      \u003cbutton onClick={this.onSubmitButton} /\u003e\n    \u003c/div\u003e\n  }\n}\n\nForm = ValidationErrorBar(Form, {\n  isValid: function () {\n    return this.firstName !== '';\n  },\n});\n\nexport default Form;\n```\n\n## Install\n\n`npm install --save react-component-extension`\n\n## Updating from a React Mixin to an Extension\n\nIt is pretty straightforward to make a React Mixin an Extension, for example here is [react-timer-mixin](https://github.com/reactjs/react-timer-mixin) as an [Extension](./examples/extensions/TimerExtension.js)\n\n### TODO\n\n* Add tests\n* Really do the example code\n* Add examples\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaskrabbit%2Freact-component-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaskrabbit%2Freact-component-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaskrabbit%2Freact-component-extension/lists"}