Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jgable/react-native-fluxbone
A group of libraries that help with the FluxBone pattern
https://github.com/jgable/react-native-fluxbone
Last synced: 2 months ago
JSON representation
A group of libraries that help with the FluxBone pattern
- Host: GitHub
- URL: https://github.com/jgable/react-native-fluxbone
- Owner: jgable
- License: mit
- Created: 2015-03-27T17:42:32.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-04-17T18:06:23.000Z (over 9 years ago)
- Last Synced: 2024-09-16T18:56:49.807Z (3 months ago)
- Language: JavaScript
- Size: 145 KB
- Stars: 5
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-fluxbone ★5 - A group of libraries that help with the FluxBone pattern in React Native (Components / Utils & Infra)
- awesome-react-native - react-native-fluxbone ★5 - A group of libraries that help with the FluxBone pattern in React Native (Components / Utils & Infra)
- awesome-react-native - react-native-fluxbone ★5 - A group of libraries that help with the FluxBone pattern in React Native (Components / Utils & Infra)
- awesome-react-native - react-native-fluxbone ★5 - A group of libraries that help with the FluxBone pattern in React Native (Components / Utils & Infra)
- awesome-react-native-ui - react-native-fluxbone ★5 - A group of libraries that help with the FluxBone pattern in React Native (Components / Utils & Infra)
README
# react-native-fluxbone
A group of libraries that help with the FluxBone pattern.
### Caution
This is a work in progress and may not be a good idea.
### How to use:
```js
var FluxBone = require('react-native-fluxbone');
var React = require('react-native');
var {
Store,
Model,
Dispatcher,
} = FluxBone;
var {
StyleSheet,
Text,
TextInput,
View,
} = React;
// Create a custom store by extending from Store
var ExampleStore = Store.extend({
// Avoid a bunch of boilerplate by using a dispatcherEvents hash
dispatcherEvents: {
'example:load': 'handleExampleLoad'
},
handleExampleLoad: function (text) {
this.fetch({
url: 'http://localhost:3000/api/example/' + text
}).then(function (responseData) {
// Trigger custom events if necessary on completion
// NOTE: The standard backbone collection "sync" events also fire
this.trigger('example:load:complete', responseData);
}.bind(this), function () {
// Trigger custom events if necessary on completion
// NOTE: The standard backbone collection "error" events also fire
this.trigger('example:load:error');
}.bind(this));
}
});
// Instantiate a store
var exampleStore = new ExampleStore();
// Create a screen to interact with
var ExampleScreen = React.createClass({
displayName: 'ExampleScreen',
getInitialState: function () {
return {
term: '',
results: null
}
},
componentDidMount: function () {
// Subscribe to events on the store
exampleStore.on('example:load:complete', function () {
console.log('Loaded!');
this.setState({
results: exampleStore.getAll()
});
}, this);
},
componentDidUnmount: function () {
// Make sure you unsubscribe from the store
exampleStore.off(null, null, this);
},
render: function () {
return (
this.setState({text: text})}
/>
{this._renderResults()}
)
},
_renderResults: function () {
if (!this.state.results) {
return null;
}
return this.state.results.map((result) => {result.text});
}
onSubmit: function () {
Dispatcher.dispatch('example:load', this.state.text);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
searchBarInput: {
fontSize: 15,
height: 30,
alignSelf: 'center',
textAlign: 'center',
margin: 20,
width: 100
},
result: {
textAlign: 'center',
color: '#333333',
marginBottom: 10
},
});
```