{"id":21031287,"url":"https://github.com/workable/backbone.react-bridge","last_synced_at":"2025-05-15T11:33:24.411Z","repository":{"id":57189082,"uuid":"79217916","full_name":"Workable/backbone.react-bridge","owner":"Workable","description":"Transform Backbone views to React components and vice versa","archived":false,"fork":false,"pushed_at":"2024-04-12T15:08:00.000Z","size":827,"stargazers_count":26,"open_issues_count":12,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-05T11:58:33.771Z","etag":null,"topics":["backbone","react","react-components","transforming-backbone-views"],"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/Workable.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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-01-17T10:49:04.000Z","updated_at":"2021-08-20T06:08:42.000Z","dependencies_parsed_at":"2024-06-19T11:19:20.160Z","dependency_job_id":"939774e0-481e-44b9-9075-11a18c51df62","html_url":"https://github.com/Workable/backbone.react-bridge","commit_stats":{"total_commits":18,"total_committers":4,"mean_commits":4.5,"dds":0.2222222222222222,"last_synced_commit":"b52b7ebd3e816f4e05163d375bafdb762ca1d84c"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Workable%2Fbackbone.react-bridge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Workable%2Fbackbone.react-bridge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Workable%2Fbackbone.react-bridge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Workable%2Fbackbone.react-bridge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Workable","download_url":"https://codeload.github.com/Workable/backbone.react-bridge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225349138,"owners_count":17460315,"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":["backbone","react","react-components","transforming-backbone-views"],"created_at":"2024-11-19T12:27:05.200Z","updated_at":"2024-11-19T12:27:05.748Z","avatar_url":"https://github.com/Workable.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Backbone.ReactBridge\n\n[![build status](https://img.shields.io/travis/Workable/backbone.react-bridge.svg?style=flat-square)](https://travis-ci.org/Workable/backbone.react-bridge)\n[![npm version](https://img.shields.io/npm/v/backbone.react-bridge.svg?style=flat-square)](https://www.npmjs.com/package/backbone.react-bridge)\n[![npm version](https://img.shields.io/npm/dm/backbone.react-bridge.svg?style=flat-square)](https://www.npmjs.com/package/backbone.react-bridge)\n\nA toolkit for transforming Backbone views to React components and vice versa. :rocket:\n\n## Installation\n\n```\n$ npm install --save-dev backbone.react-bridge\n```\n\n## Usage\n\n### React Component :arrow_right: Backbone View\n\n  \u003e This function allows you to get a Backbone.View from a React component. It accepts as input a React Component instance or class along with some extra options.\n\n  Full blown example with available options:\n\n  ```js\n\n  const fooView = ReactBridge.viewFromComponent(FooComponent, {\n\n      // Provide a model for the Backbone.View\n\n      model: fooModel,\n\n      // Provide a collection for the Backbone.View\n\n      collection: fooCollection,\n\n      // By default the view gets re-rendered\n      // on model \"change\" and collection \"add remove reset\" events\n      // But you can override this using the `observe` property\n\n      observe: {\n        model: 'change',\n        collection: 'reset add remove'\n      },\n\n      // Define custom properties which will be passed to the React Component.\n      // In case that the properties overlap with the model attributes,\n      // the values of the model will be ovewritten.\n\n      props: {\n        title: 'Foo Title',\n        subtitle: 'Foo Subtitle'\n      },\n\n      // Customize the form of the properties which will be passed to the\n      // React Component. In case that 'getProps' is undefined, a composition\n      // of the model's attributes, the collection's values and the custom\n      // properties will be returned to the React Component.\n      // `getProps` receives an object with `model` and `collection` as properties.\n\n      getProps({collection, model}) {\n        return {\n          titles: collection.map((m) =\u003e {title: m.get('title').toUpperCase()}),\n          content: model.get('content')\n        }\n      }\n\n  });\n\n  fooView.render();\n\n  // Or if using Marionette.js\n\n  region.show(fooView);\n\n  ```\n\n  None of the options described above are required in order to use the viewFromComponent function.\n\n##\n\n### **Backbone View :arrow_right: React Component**\n\n  \u003e This function allows you to get a React component from a Backbone view. It accepts either a Backbone.View instance or class along with some extra options.\n\n  Full blown example with available options:\n\n  ```js\n\n  const Bar = ReactBridge.componentFromView(BarView, {\n\n      // Override the default tagName of the element which will wrap\n      // the React Component. If not provided, the default tagName\n      // according to Backbone will be used\n\n      tagName: 'ul',\n\n      // Add a custom class on the element which will wrap the React Component\n\n      className: 'barClass',\n\n      // Using Redux? We got you covered!\n      // You can define actions that will be dispatched when\n      // specific events are triggered from the Backbone View.\n      // This feature requires a reference of the store's dispatch function\n\n      eventsToActions : {\n        // Dispatch a \"BAR_SUBMIT\" action when a \"submit\" event is triggered by the view\n        'submit': () =\u003e ({type: 'BAR_SUBMIT'})\n      }\n\n      // A reference to the Redux store's dispatch function. This function is\n      // used to dispatch the actions registered via the eventToActions option\n\n      dispatch: store.dispatch\n\n  });\n\n  ReactDOM.render(\u003cBar /\u003e, document.querySelector('#bar'));\n\n  ```\n\n  None of the options described above are required in order to use the componentFromView function.\n\n\n### Examples\n\n```\n$ npm install\n$ npm start\n```\nEnjoy! :blush:\n\n\n### Build\n```\n$ npm run build\n```\n\n\n### Test \u0026 Coverage\n```\n$ npm run coverage\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkable%2Fbackbone.react-bridge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fworkable%2Fbackbone.react-bridge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkable%2Fbackbone.react-bridge/lists"}