{"id":4476,"url":"https://github.com/jgable/react-native-fluxbone","last_synced_at":"2025-04-11T01:12:44.242Z","repository":{"id":29463944,"uuid":"33000463","full_name":"jgable/react-native-fluxbone","owner":"jgable","description":"A group of libraries that help with the FluxBone pattern","archived":false,"fork":false,"pushed_at":"2015-04-17T18:06:23.000Z","size":148,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-11T01:12:37.886Z","etag":null,"topics":[],"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/jgable.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-27T17:42:32.000Z","updated_at":"2016-10-21T19:06:38.000Z","dependencies_parsed_at":"2022-09-12T11:10:14.949Z","dependency_job_id":null,"html_url":"https://github.com/jgable/react-native-fluxbone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgable%2Freact-native-fluxbone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgable%2Freact-native-fluxbone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgable%2Freact-native-fluxbone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgable%2Freact-native-fluxbone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jgable","download_url":"https://codeload.github.com/jgable/react-native-fluxbone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322571,"owners_count":21084337,"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":[],"created_at":"2024-01-05T20:17:13.735Z","updated_at":"2025-04-11T01:12:44.215Z","avatar_url":"https://github.com/jgable.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Utils \u0026 Infra"],"readme":"# react-native-fluxbone\n\nA group of libraries that help with the FluxBone pattern.\n\n### Caution\n\nThis is a work in progress and may not be a good idea.\n\n### How to use:\n\n```js\nvar FluxBone = require('react-native-fluxbone');\nvar React = require('react-native');\n\nvar {\n  Store,\n  Model,\n  Dispatcher,\n} = FluxBone;\n\nvar {\n  StyleSheet,\n  Text,\n  TextInput,\n  View,\n} = React;\n\n// Create a custom store by extending from Store\nvar ExampleStore = Store.extend({\n  // Avoid a bunch of boilerplate by using a dispatcherEvents hash\n  dispatcherEvents: {\n    'example:load': 'handleExampleLoad'\n  },\n\n  handleExampleLoad: function (text) {\n    this.fetch({\n      url: 'http://localhost:3000/api/example/' + text\n    }).then(function (responseData) {\n      // Trigger custom events if necessary on completion\n      // NOTE: The standard backbone collection \"sync\" events also fire\n      this.trigger('example:load:complete', responseData);\n    }.bind(this), function () {\n      // Trigger custom events if necessary on completion\n      // NOTE: The standard backbone collection \"error\" events also fire\n      this.trigger('example:load:error');\n    }.bind(this));\n  }\n});\n\n// Instantiate a store\nvar exampleStore = new ExampleStore();\n\n// Create a screen to interact with\nvar ExampleScreen = React.createClass({\n  displayName: 'ExampleScreen',\n\n  getInitialState: function () {\n    return {\n      term: '',\n      results: null\n    }\n  },\n\n  componentDidMount: function () {\n    // Subscribe to events on the store\n    exampleStore.on('example:load:complete', function () {\n      console.log('Loaded!');\n      this.setState({\n        results: exampleStore.getAll()\n      });\n    }, this);\n  },\n\n  componentDidUnmount: function () {\n    // Make sure you unsubscribe from the store\n    exampleStore.off(null, null, this);\n  },\n\n  render: function () {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cTextInput\n          style={styles.searchBarInput}\n          onSubmitEditing={this.onSubmit}\n          onChangeText={(text) =\u003e this.setState({text: text})}\n          /\u003e\n        {this._renderResults()}\n      \u003c/View\u003e\n    )\n  },\n\n  _renderResults: function () {\n    if (!this.state.results) {\n      return null;\n    }\n\n    return this.state.results.map((result) =\u003e \u003cText style={styles.result}\u003e{result.text}\u003c/Text\u003e);\n  }\n\n  onSubmit: function () {\n    Dispatcher.dispatch('example:load', this.state.text);\n  }\n});\n\nvar styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: 'white',\n  },\n  searchBarInput: {\n    fontSize: 15,\n    height: 30,\n    alignSelf: 'center',\n    textAlign: 'center',\n    margin: 20,\n    width: 100\n  },\n  result: {\n    textAlign: 'center',\n    color: '#333333',\n    marginBottom: 10\n  },\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgable%2Freact-native-fluxbone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjgable%2Freact-native-fluxbone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgable%2Freact-native-fluxbone/lists"}