{"id":19180153,"url":"https://github.com/hoppula/refire-app","last_synced_at":"2025-05-07T22:09:11.223Z","repository":{"id":57352100,"uuid":"53423071","full_name":"hoppula/refire-app","owner":"hoppula","description":"Opinionated wrapper for quick prototyping with React, Redux and Firebase","archived":false,"fork":false,"pushed_at":"2017-09-15T19:03:57.000Z","size":21,"stargazers_count":25,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T22:08:54.669Z","etag":null,"topics":["firebase","prototyping","react","redux"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoppula.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-08T15:29:09.000Z","updated_at":"2023-03-25T06:58:55.000Z","dependencies_parsed_at":"2022-09-18T07:07:38.859Z","dependency_job_id":null,"html_url":"https://github.com/hoppula/refire-app","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/hoppula%2Frefire-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoppula%2Frefire-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoppula%2Frefire-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoppula%2Frefire-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoppula","download_url":"https://codeload.github.com/hoppula/refire-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252961841,"owners_count":21832197,"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":["firebase","prototyping","react","redux"],"created_at":"2024-11-09T10:48:18.108Z","updated_at":"2025-05-07T22:09:11.194Z","avatar_url":"https://github.com/hoppula.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# refire-app\n\n\u003e Opinionated wrapper for quick prototyping with React, Redux and Firebase\n\n## Quick start\n\n1. Install [create-react-app](https://github.com/facebookincubator/create-react-app) with `npm install -g create-react-app`\n2. Generate your React app, e.g. `create-react-app my-app` and `cd my-app`\n3. Install `refire-app` with `npm install -S refire-app`\n4. Paste following code over previous content in `src/index.js` and run the app with `npm start`\n\n```js\nimport React from 'react'\nimport refireApp, { IndexRoute, Route, Link, bindings, styles } from 'refire-app'\n\nconst nameStyles = { textTransform: \"capitalize\" }\n\nconst App = (props) =\u003e (\u003cdiv\u003e{props.children}\u003c/div\u003e)\n\nconst Dinosaurs = styles(\n  { name: nameStyles, container: { listStyle: \"none\" } },\n  bindings([ \"dinosaurs\" ])(({ dinosaurs: dinos, styles }) =\u003e {\n    if (!dinos) return (\u003cdiv\u003eLoading...\u003c/div\u003e)\n    const { value: dinosaurs = [] } = dinos || {}\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003eDinosaurs\u003c/h1\u003e\n        \u003cul className={styles.container}\u003e\n        {\n          dinosaurs.map(({key}) =\u003e (\n            \u003cli key={key} className={styles.name}\u003e\n              \u003cLink to={`/${key}`}\u003e{key}\u003c/Link\u003e\n            \u003c/li\u003e\n          ))\n        }\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    )\n  })\n)\n\nconst Dinosaur = styles(\n  { name: nameStyles },\n  bindings([ \"dinosaur\", \"score\" ])(({ dinosaur: dino, score: dinoScore, styles }) =\u003e {\n    if (!dino || !dinoScore) return (\u003cdiv\u003eLoading...\u003c/div\u003e)\n    const { value: dinosaur = {}, key: name } = dino || {}\n    const { value: score = {} } = dinoScore || {}\n    return (\n      \u003cdiv\u003e\n        \u003ch1 className={styles.name}\u003e{name}\u003c/h1\u003e\n        \u003ch2\u003e{score} points\u003c/h2\u003e\n        \u003cul\u003e\n          \u003cli\u003eOrder: {dinosaur.order}\u003c/li\u003e\n          \u003cli\u003eAppeared: {dinosaur.appeared} years ago\u003c/li\u003e\n          \u003cli\u003eVanished: {dinosaur.vanished} years ago\u003c/li\u003e\n          \u003cli\u003eHeight: {dinosaur.height} m\u003c/li\u003e\n          \u003cli\u003eLength: {dinosaur.length} m\u003c/li\u003e\n          \u003cli\u003eWeight: {dinosaur.weight} kg\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cLink to=\"/\"\u003eBack to dinosaurs list\u003c/Link\u003e\n      \u003c/div\u003e\n    )\n  })\n)\n\nconst apiKey = 'your-api-key-from-firebase-console-not-needed-in-this-example'\nconst projectId = 'dinosaur-facts'\n\nconst firebaseBindings = {\n  \"dinosaurs\": { type: \"Array\", path: \"dinosaurs\" },\n  \"dinosaur\": {\n    type: \"Object\",\n    path: (state) =\u003e {\n      const { dinosaurId } = state.routing.params\n      return dinosaurId ? `dinosaurs/${dinosaurId}` : null\n    }\n  },\n  \"score\": {\n    type: \"Object\",\n    path: (state) =\u003e {\n      const { dinosaurId } = state.routing.params\n      return dinosaurId ? `scores/${dinosaurId}` : null\n    }\n  }\n}\n\nconst routes = (\n  \u003cRoute path=\"/\" component={App}\u003e\n    \u003cIndexRoute component={Dinosaurs} /\u003e\n    \u003cRoute path=\":dinosaurId\" component={Dinosaur} /\u003e\n  \u003c/Route\u003e\n)\n\nrefireApp({\n  apiKey,\n  projectId,\n  bindings: firebaseBindings,\n  routes,\n  elementId: \"root\"\n})\n```\n\n## refireApp(options={})\n\nInitializes redux, react-router, react-router-redux-params and refire.\n\n### options\n\n**apiKey** *Firebase api key*\n\n**projectId** *Firebase project id*\n\n**bindings** *Refire bindings*\n\n**routes** *React Router routes*\n\n**reducers = {}** *Additional redux reducers*\n\n**middleware = []** *Additional redux middleware*\n\n**history = browserHistory** *Which type of history react-router should use*\n\n**elementId = 'app'** *DOM element id for your app*\n\n## Component wrappers\n\n### bindings([])\n\n```js\nimport React, { Component } from 'react'\nimport { bindings } from 'refire-app'\nclass YourComponent extends Component {\n  render() {\n    // board \u0026 boardThreads data available as props, re-rendered automatically as data changes\n  }\n}\nexport default bindings([\"board\", \"boardThreads\"])(YourComponent)\n```\n\n### styles({})\n\nWrapper for [react-free-style](https://github.com/blakeembrey/react-free-style), your styles will be automatically inserted to a style tag at app's root level with unique classnames.\n\nStyles can be defined as plain JS objects, this means you can use libraries like [color](https://github.com/Qix-/color) or [prefix-lite](https://github.com/namuol/prefix-lite) to enhance your styles.\n\n```js\nimport React, { Component } from 'react'\nimport { styles } from 'refire-app'\nclass YourComponent extends Component {\n  render() {\n    const { styles } = this.props\n    return (\n      \u003cdiv className={styles.container}\u003e\n        ...\n      \u003c/div\u003e\n    )\n  }\n}\nexport default styles({\n  container: {\n    padding: \"30px 0\",\n    background: \"#000\",\n    color: \"#fff\"\n  }\n}, YourComponent)\n```\n\nYou can also allow your components to be easily extended by users, any component wrapped with `styles` will accept `styles` prop to be passed in and those styles will be merged with existing styles.\n\n```js\nimport React, { Component } from 'react'\n\nclass UserComponent extends Component {\n  render() {\n    // we want more top \u0026 bottom padding, other container styles will stay as they were defined in YourComponent\n    return (\n      \u003cdiv\u003e\n        \u003cYourComponent styles={{container: {padding: \"50px 0\"} }} /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nexport default UserComponent\n```\n\n## Exports\n\n### [refire](https://github.com/hoppula/refire)\n* firebaseToProps\n* FirebaseLogin\n* FirebaseLogout\n* FirebaseOAuth\n* FirebaseRegistration\n* FirebaseResetPassword\n* FirebaseWrite\n* [firebase](https://www.npmjs.com/package/firebase)\n* USER_AUTHENTICATED\n* USER_UNAUTHENTICATED\n\n### [react-redux](https://github.com/reactjs/react-redux)\n* connect\n\n### [redux](https://github.com/reactjs/redux)\n* bindActionCreators\n\n### [react-router](https://github.com/reactjs/react-router)\n* Link\n* IndexLink\n* IndexRedirect\n* IndexRoute\n* Redirect\n* Route\n* browserHistory\n* hashHistory\n\n### [react-router-redux-params](https://github.com/hoppula/react-router-redux-params)\n* routeActions\n\n### [react-free-style](https://github.com/blakeembrey/react-free-style)\n* create (as createStyles)\n\n## Real world example\n\n[refire-forum](https://github.com/hoppula/refire-forum) is built with refire-app.\n\n[Live demo](https://refire.firebaseapp.com/)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoppula%2Frefire-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoppula%2Frefire-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoppula%2Frefire-app/lists"}