Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cef62/react-pubsub
PubSub abstraction layer for React, should support any compliant pub-sub libray.
https://github.com/cef62/react-pubsub
Last synced: about 1 month ago
JSON representation
PubSub abstraction layer for React, should support any compliant pub-sub libray.
- Host: GitHub
- URL: https://github.com/cef62/react-pubsub
- Owner: cef62
- License: mit
- Created: 2015-11-29T18:00:31.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-28T16:56:30.000Z (about 8 years ago)
- Last Synced: 2024-05-27T23:12:45.058Z (9 months ago)
- Language: JavaScript
- Size: 88.9 KB
- Stars: 17
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React-PubSub
React-PubSub is an abstraction layer for React. The idea is to enable PubSub communication between React components, completely decoupling the PubSub layer and its consumption.
React-PubSub enable support to any compliant PubSub libray via `custom adapters`.
The library is just 14kB and comes with an internal PubSub implementation ready to be used out of the box.
[](https://github.com/semantic-release/semantic-release)
[](https://travis-ci.org/cef62/react-pubsub) [](https://www.npmjs.com/package/react-pubsub) [](https://www.npmjs.com/package/react-pubsub) [](http://commitizen.github.io/cz-cli/)
# Installation
React-Pubsub requires **React 0.14** or later.
## Using npm based module bundlers
If you are using [webpack](http://webpack.github.io) or [browserify](http://browserify.org/) to manage the project dependencies:
```shell
npm install --save react-pubsub
```
## Using other build systems
If you are using *bower* or other build system an [UMD](https://github.com/umdjs/umd) build is available at [unpkg.com](https://unpkg.com):
* **UMD uncompressed**: [react-pubsub.js](https://unpkg.com/react-pubsub/dist/react-pubsub.js)
* **UMD compressed**: [react-pubsub.min.js](https://unpkg.com/react-pubsub/dist/react-pubsub.min.js)
Using the *UMD* build `react-pubsub` is available as a global object.
# React Native
React-SubPub should work without problems with React Native, but we've not already tried it.
# Quick Start
React-PubSub offers 3 elements:
* a PubSub Wrapper
* a PubSub Provider
* a PubSub Connector
## Provider Component
To start using it you must create a **PubSub Wrapper** and passit to a **PubSub Provider**.
The **Provider** will expose to its children the **PubSub Wrapper API**.
```javascript
// App.js
import React, { Component } from 'react';
import { createPubSub, PubSubProvider } from 'react-pubsub';
import ConnectedComponent from './ConnectedComponent';
const pubSubCore = createPubSub();
export default class App extends Component {
render() {
return (
{ .... }
);
}
}
```
## Connector Component
Any children of **PubSubProvider** who require access to the PubSub API should be wrapped by a **PubSub Connector**.
The connector will pass `pubSub` as **prop** to its child component.
Create the Connected Component:
```javascript
// ConnectedComponent.js
import React, { Component, PropTypes } from 'react';
import { createPubSubConnector } from 'react-pubsub';
class ConnectedComponent extends Component {
componentDidMount() {
const { pubSub } = this.props;
// use PubSub API
}
render() {
return (
Connected Component
);
}
}
ConnectedComponent.propTypes = {
pubSub: subscriptionShape.isRequired,
};
export default createPubSubConnector()(ConnectedComponent);
```
**Attention** `createPubSubConnector` must be invoked twice, first with configuration parameters and the returned function with the component to be wrapped.
### Remove subscribed events
The **PubSub Connector** automatically remove all subscription when the component will unmount.
# Documentation
More info coming soon...
# License
MIT