{"id":28089443,"url":"https://github.com/mongodb-js/connect-backbone-to-react","last_synced_at":"2025-05-13T12:58:06.706Z","repository":{"id":57205658,"uuid":"81875919","full_name":"mongodb-js/connect-backbone-to-react","owner":"mongodb-js","description":"Connect Backbone Models and Collections to React.","archived":false,"fork":false,"pushed_at":"2023-04-21T20:02:54.000Z","size":364,"stargazers_count":27,"open_issues_count":3,"forks_count":5,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-11T07:26:14.167Z","etag":null,"topics":["backbonejs","connect","react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/connect-backbone-to-react","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/mongodb-js.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-13T21:54:37.000Z","updated_at":"2024-01-09T20:17:44.000Z","dependencies_parsed_at":"2024-06-21T20:22:07.838Z","dependency_job_id":"010e494a-5596-42a1-b702-560a2fa6d161","html_url":"https://github.com/mongodb-js/connect-backbone-to-react","commit_stats":{"total_commits":60,"total_committers":10,"mean_commits":6.0,"dds":0.5166666666666666,"last_synced_commit":"59562bbd6cd856834100c728de55ac5b1f688bc4"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mongodb-js%2Fconnect-backbone-to-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mongodb-js%2Fconnect-backbone-to-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mongodb-js%2Fconnect-backbone-to-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mongodb-js%2Fconnect-backbone-to-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mongodb-js","download_url":"https://codeload.github.com/mongodb-js/connect-backbone-to-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253568721,"owners_count":21928910,"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":["backbonejs","connect","react"],"created_at":"2025-05-13T12:58:06.065Z","updated_at":"2025-05-13T12:58:06.686Z","avatar_url":"https://github.com/mongodb-js.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# connect-backbone-to-react [![travis][travis_img]][travis_url] [![npm][npm_img]][npm_url]\n\n\u003e Connect Backbone Models and Collections to React.\n\n## Usage\n\n`npm install connect-backbone-to-react` or `yarn add connect-backbone-to-react` in your React/Backbone project. See code samples below to how to integrate into your code.\n\n## Example\n\n[![Edit connectBackboneToReact](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l5n4m0qk79?module=%2FDemo.js)\n\n### connectBackboneToReact\n\n```javascript\nconst UserModel = Backbone.Model.extend();\nconst UserCollection = Backbone.Collection.extend({ model: UserModel });\n\nconst userInstance = new UserModel({ name: \"Harry\", laughs: true });\nconst anotherUserInstance = new UserModel({ name: \"Samantha\", laughs: false });\nconst userCollection = new UserCollection([userInstance, anotherUserInstance]);\n\nclass MyComponent extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003eMy user laughs: {this.props.doesUserLaugh ? \"yes\" : \"no\"}\u003c/p\u003e\n        \u003cbutton\n          onClick={() =\u003e this.props.setUserLaughs(!this.props.doesUserLaugh)}\n        \u003e\n          Toggle Laughing User\n        \u003c/button\u003e\n        \u003ch4\u003eAll Users\u003c/h4\u003e\n        \u003cul\u003e\n          {this.props.users.map(user =\u003e (\n            \u003cli key={user.name}\u003e{user.name}\u003c/li\u003e\n          ))}\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n// Maps Models to properties to give to the React Component. Optional.\n// Default behavior is to call `.toJSON()` on every Model and Collection.\n// Second argument are props given to the React Component.\nconst mapModelsToProps = (models, props) =\u003e {\n  const { user, allUsers } = models;\n  const { showOnlyLaughingUsers } = props;\n\n  // Everything returned from this function will be given as a prop to your Component.\n  return {\n    doesUserLaugh: user.get(\"laughs\"),\n    users: showOnlyLaughingUsers\n      ? allUsers.toJSON().filter(user =\u003e user.laughs === true)\n      : allUsers.toJSON(),\n    setUserLaughs(newVal) {\n      user.set(\"laughs\", newVal);\n    }\n  };\n};\n\n// Options.\nconst options = {\n  // Should our event handler function be wrapped in a debounce function\n  // to prevent many re-renders.\n  debounce: false, // or `true`, or a number that will be used in the debounce function.\n\n  // Define what events you want to listen to on your Backbone Model or Collection\n  // that will cause your React Component to re-render.\n  // By default it's ['all'] for every Model and Collection given.\n  events: {\n    user: [\"change:name\", \"change:laughs\"]\n    // You can disable listening to events by passing in `false` or an empty array.\n  },\n\n  // Define what modelTypes you expect to be contained on your `modelsMap` object.\n  // Useful for validating that you'll be given what model type you expect.\n  // Uses instanceof, and throws an error if instanceof returns false.\n  // By default no modelTypes are defined.\n  modelTypes: {\n    user: UserModel,\n    allUsers: UserCollection\n  },\n\n  // Enable access to the wrapped component's ref with the `withRef` option.\n  // You can then access the wrapped component from the connected component's `getWrappedInstance()`.\n  // This is similar to react-redux's connectAdvanced() HOC.\n  // By default, `withRef` is false.\n  withRef: true\n};\n\nconst { connectBackboneToReact } = require(\"connect-backbone-to-react\");\n\n// Create our Connected Higher order Component (HOC).\nconst MyComponentConnected = connectBackboneToReact(\n  mapModelsToProps,\n  options\n)(MyComponent);\n```\n\nNow that you've created your HOC you can use it!\n\n```javascript\n// Map your Backbone Model and Collections to names that will be provided to\n// your mapModelsToProps function.\nconst modelsMap = {\n  user: userInstance,\n  allUsers: userCollection\n};\n\nReactDOM.render(\n  // Pass the modelsMap to the HOC via the models prop.\n  \u003cMyComponentConnected models={modelsMap} showOnlyLaughingUsers={true} /\u003e,\n  document.getElementById(\"app\")\n);\n```\n\n### BackboneProvider\n\nAlternatively you might have a tree of connected Components. We shouldn't pass that `modelsMap` object from one component to another. Instead we can take inspiration from [react-redux's Provider component](https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store).\n\n```javascript\nconst { BackboneProvider } = require('connect-backbone-to-react');\n\nconst modelsMap = {\n  user: userInstance,\n  allUsers: userCollection,\n},\n\nReactDOM.render(\n  // Pass the modelsMap to the BackboneProvider via the models prop.\n  // It will then get shared to every child connected component via React's context.\n  \u003cBackboneProvider models={modelsMap}\u003e\n    \u003cMyComponentConnected\u003e\n      \u003cMyComponentConnected /\u003e\n    \u003c/MyComponentConnected\u003e\n  \u003c/BackboneProvider\u003e,\n  document.getElementById('app')\n);\n```\n\n## Rendering React Within Backbone.View\n\nThis library's focus is on sharing Backbone.Models with React Components. It is not concerned with how to render React Components within Backbone.Views. [The React docs provide a possible implementation for this interopt.](https://reactjs.org/docs/integrating-with-other-libraries.html#embedding-react-in-a-backbone-view)\n\n## Local development\n\nTo develop this library locally, run the following commands in the project root directory:\n\n1. `npm run watch`. The library will be automatically compiled in the background as you make changes.\n2. `npm link` and then follow the instructions to use the local version of this library in another project that uses `connect-backbone-to-react`.\n\nRun `npm test` to run the unit tests.\n\n### Releasing a new version\n\n1. Make sure you have up to date `node_modules` before you proceed. Can be done via `npm ci`\n2. Update the version via: `npm run release -- --release-as=major|minor|patch`\n3. Optionally manually edit the revised `CHANGELOG.md` file. Commit changes.\n4. Follow the directions from step 2: run `git push --follow-tags origin master; npm publish` to publish\n5. Rejoice!\n\n## License\n\nApache 2.0\n\n[travis_img]: https://img.shields.io/travis/mongodb-js/connect-backbone-to-react.svg\n[travis_url]: https://travis-ci.org/mongodb-js/connect-backbone-to-react\n[npm_img]: https://img.shields.io/npm/v/connect-backbone-to-react.svg\n[npm_url]: https://npmjs.org/package/connect-backbone-to-react\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmongodb-js%2Fconnect-backbone-to-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmongodb-js%2Fconnect-backbone-to-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmongodb-js%2Fconnect-backbone-to-react/lists"}