https://github.com/mongodb-js/connect-backbone-to-react
Connect Backbone Models and Collections to React.
https://github.com/mongodb-js/connect-backbone-to-react
backbonejs connect react
Last synced: 5 months ago
JSON representation
Connect Backbone Models and Collections to React.
- Host: GitHub
- URL: https://github.com/mongodb-js/connect-backbone-to-react
- Owner: mongodb-js
- License: apache-2.0
- Created: 2017-02-13T21:54:37.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-21T20:02:54.000Z (over 2 years ago)
- Last Synced: 2025-04-11T07:26:14.167Z (6 months ago)
- Topics: backbonejs, connect, react
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/connect-backbone-to-react
- Size: 355 KB
- Stars: 27
- Watchers: 7
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# connect-backbone-to-react [![travis][travis_img]][travis_url] [![npm][npm_img]][npm_url]
> Connect Backbone Models and Collections to React.
## Usage
`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.
## Example
[](https://codesandbox.io/s/l5n4m0qk79?module=%2FDemo.js)
### connectBackboneToReact
```javascript
const UserModel = Backbone.Model.extend();
const UserCollection = Backbone.Collection.extend({ model: UserModel });
const userInstance = new UserModel({ name: "Harry", laughs: true });
const anotherUserInstance = new UserModel({ name: "Samantha", laughs: false });
const userCollection = new UserCollection([userInstance, anotherUserInstance]);
class MyComponent extends React.Component {
render() {
return (
My user laughs: {this.props.doesUserLaugh ? "yes" : "no"}
this.props.setUserLaughs(!this.props.doesUserLaugh)}
>
Toggle Laughing User
All Users
{this.props.users.map(user => (
- {user.name}
))}
);
}
}
// Maps Models to properties to give to the React Component. Optional.
// Default behavior is to call `.toJSON()` on every Model and Collection.
// Second argument are props given to the React Component.
const mapModelsToProps = (models, props) => {
const { user, allUsers } = models;
const { showOnlyLaughingUsers } = props;
// Everything returned from this function will be given as a prop to your Component.
return {
doesUserLaugh: user.get("laughs"),
users: showOnlyLaughingUsers
? allUsers.toJSON().filter(user => user.laughs === true)
: allUsers.toJSON(),
setUserLaughs(newVal) {
user.set("laughs", newVal);
}
};
};
// Options.
const options = {
// Should our event handler function be wrapped in a debounce function
// to prevent many re-renders.
debounce: false, // or `true`, or a number that will be used in the debounce function.
// Define what events you want to listen to on your Backbone Model or Collection
// that will cause your React Component to re-render.
// By default it's ['all'] for every Model and Collection given.
events: {
user: ["change:name", "change:laughs"]
// You can disable listening to events by passing in `false` or an empty array.
},
// Define what modelTypes you expect to be contained on your `modelsMap` object.
// Useful for validating that you'll be given what model type you expect.
// Uses instanceof, and throws an error if instanceof returns false.
// By default no modelTypes are defined.
modelTypes: {
user: UserModel,
allUsers: UserCollection
},
// Enable access to the wrapped component's ref with the `withRef` option.
// You can then access the wrapped component from the connected component's `getWrappedInstance()`.
// This is similar to react-redux's connectAdvanced() HOC.
// By default, `withRef` is false.
withRef: true
};
const { connectBackboneToReact } = require("connect-backbone-to-react");
// Create our Connected Higher order Component (HOC).
const MyComponentConnected = connectBackboneToReact(
mapModelsToProps,
options
)(MyComponent);
```
Now that you've created your HOC you can use it!
```javascript
// Map your Backbone Model and Collections to names that will be provided to
// your mapModelsToProps function.
const modelsMap = {
user: userInstance,
allUsers: userCollection
};
ReactDOM.render(
// Pass the modelsMap to the HOC via the models prop.
,
document.getElementById("app")
);
```
### BackboneProvider
Alternatively 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).
```javascript
const { BackboneProvider } = require('connect-backbone-to-react');
const modelsMap = {
user: userInstance,
allUsers: userCollection,
},
ReactDOM.render(
// Pass the modelsMap to the BackboneProvider via the models prop.
// It will then get shared to every child connected component via React's context.
,
document.getElementById('app')
);
```
## Rendering React Within Backbone.View
This 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)
## Local development
To develop this library locally, run the following commands in the project root directory:
1. `npm run watch`. The library will be automatically compiled in the background as you make changes.
2. `npm link` and then follow the instructions to use the local version of this library in another project that uses `connect-backbone-to-react`.
Run `npm test` to run the unit tests.
### Releasing a new version
1. Make sure you have up to date `node_modules` before you proceed. Can be done via `npm ci`
2. Update the version via: `npm run release -- --release-as=major|minor|patch`
3. Optionally manually edit the revised `CHANGELOG.md` file. Commit changes.
4. Follow the directions from step 2: run `git push --follow-tags origin master; npm publish` to publish
5. Rejoice!
## License
Apache 2.0
[travis_img]: https://img.shields.io/travis/mongodb-js/connect-backbone-to-react.svg
[travis_url]: https://travis-ci.org/mongodb-js/connect-backbone-to-react
[npm_img]: https://img.shields.io/npm/v/connect-backbone-to-react.svg
[npm_url]: https://npmjs.org/package/connect-backbone-to-react