{"id":17134139,"url":"https://github.com/fernandes/reativo","last_synced_at":"2025-04-13T08:54:11.125Z","repository":{"id":34361087,"uuid":"175255864","full_name":"fernandes/reativo","owner":"fernandes","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-03T18:37:32.000Z","size":1195,"stargazers_count":3,"open_issues_count":48,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-23T00:08:44.573Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Ruby","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/fernandes.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-12T16:38:58.000Z","updated_at":"2019-06-24T17:06:11.000Z","dependencies_parsed_at":"2023-01-15T06:45:28.806Z","dependency_job_id":null,"html_url":"https://github.com/fernandes/reativo","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandes%2Freativo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandes%2Freativo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandes%2Freativo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandes%2Freativo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fernandes","download_url":"https://codeload.github.com/fernandes/reativo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248688542,"owners_count":21145763,"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-10-14T19:43:59.726Z","updated_at":"2025-04-13T08:54:11.105Z","avatar_url":"https://github.com/fernandes.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reativo\n\nIt's my personal library, where I try to make Rails more Reactive (Reativo is the portuguese word for Reactive).\n\nNo, it's **NOT** a replaced for [react-rails](https://github.com/reactjs/react-rails/) or [webpacker](https://github.com/rails/webpacker) and will never be. Actually it heavily rely on both, built on shoulders of giants.\n\nSo what is it? I've been seen myself replicating code over some rails projects, with some _patterns_ I've been constantly using, so one day I decided, I'm over! I need a gem to make myself easier to use.\n\nAnd here I am\n\nThis gem rely a lot on Trailblazer ecossystem, and make part of my workflow.\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'reativo'\n```\n\nTo use our npm package, also run:\n\n```bash\nyarn add reativo\nnpm install --save reativo\n```\n\nIt has some [peerDependencies](https://github.com/fernandes/reativo/blob/d78b9ab4d88930178fd55267dfed2f32cb2ff2d2/reativo_js/package.json#L17-L31), check this out.\n\n## Usage\n\nThe basic usage is include the concern on your controller and set the layout component.\n\n```ruby\nclass TodosController \u003c ApplicationController\n  include Reativo::CrudController\n\n  def theme_cell\n    Theme::Cell::Layout\n  end\nend\n```\n\nNot sure about how to customize? check the [Reativo::CrudController](https://github.com/fernandes/reativo/blob/master/app/controllers/reativo/crud_controller.rb) and check how it works, I tried to split so make easier to overwrite, like normal Ruby 😉\n\nA common problem is, if you are using trailblazer \u003c 2.1, you can overwrite `result_model` to use a string key\n\n```ruby\ndef result_model\n  result['model']\nend\n```\n\n### Snackbar\n\nReativo comes with a Snackbar based on [notistack](https://github.com/iamhosseindhv/notistack), if you'd like to use, create your own Snackbar, based on the library's one, like this:\n\n```js\nimport React from 'react';\nimport { Snackbar as SnackbarOriginal } from \"reativo\"\n\nfunction Snackbar({messages}) {\n  return \u003cSnackbarOriginal messages={messages} /\u003e\n}\n\nexport default Snackbar\n```\n\nThis is needed so the Notistack Context works correctly.\n\n## JS\n\nReativo now bundles with a JS library! (this is my first one, so if you try and it's broken, please, don't blame me hahah)\n\nThe most complete example would be a form, that uses the `AppContainer`, and the `RailsForm` classes:\n\n```js\nimport { hot } from 'react-hot-loader/root'\nimport { wrapper, RailsForm } from \"reativo\"\nimport { Form as FinalForm } from 'react-final-form'\nimport Form from './Form'\n\nfunction New() {\n  return (\n    \u003cdiv style={{ padding: 16, margin: 'auto', maxWidth: 600 }}\u003e\n      \u003cRailsForm\n        component={FinalForm}\n        action='create'\n        url='/todos'\n        render={(props) =\u003e (\n          \u003cForm {...props} /\u003e\n        )}\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default hot(\n  wrapper(New)\n)\n```\n\nAnd to use a redux store and your own theme, don't forget to do the following on your pack:\n\n```js\nimport store from '../src/store' // this is a normal redux store, check\n// https://github.com/fernandes/reativo/blob/master/test/dummy/app/javascript/src/store.js\n// for an example\nwindow.store = store\n// and keep on window.store, so during page changes (using Turbolinks), we don't loose\n// the state of our store\n// now that we have our own JS library, maybe this can change in the future\n\nimport theme from '../src/theme' // this is a normal, Material UI theme, check\n// https://github.com/fernandes/reativo/blob/master/test/dummy/app/javascript/src/theme.js\n// for an example\n\nimport { setTheme } from 'reativo'\nsetTheme(theme)\n```\n\n### Auto Complete\n\nThe JS library comes with a material-ui ready to use select using auto complete\n\nI'm not sure if a trailblazer operation / macro could help here... thoughts?\n\n```js\nconst loadOptions = (inputValue, callback) =\u003e {\n  axios.get(`/todos.json?q=${inputValue}`)\n  .then(function (response) {\n    const results = response.data.map(x =\u003e {\n      return { value: x.id, label: x.title}\n    })\n    callback(results)\n  })\n}\n\nconst handleChange = (value) =\u003e {\n  console.log('Auto Compete Selected: ', value)\n}\n\nimport { SelectAutoComplete } from 'reativo'\n\n\u003cSelectAutoComplete\n  loadOptions={loadOptions}\n  handleChange={this.handleChange}\n/\u003e\n```\n\n## Generator\n\nIt comes with a generator for Trailblazer, so, yeah!, you can generate the operations, contracts and representers!\n\n```bash\nrails g reativo\n```\n\nAnd check the [usage](https://github.com/fernandes/reativo/blob/master/lib/generators/reativo/USAGE)\n\n## Contributing\n\nPlease, help contributing, try to fix more than you break and world will be a better place! 😉\n\n## Releasing\n\n- [ ] Bump rails version\n- [ ] Update Gemfile.lock\n- [ ] Bump package.json version\n- [ ] Edit CHANGELOG\n- [ ] Commit\n- [ ] Publish (rake release \u0026\u0026 npm publish:npm \u0026\u0026 npm publish)\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandes%2Freativo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffernandes%2Freativo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandes%2Freativo/lists"}