{"id":13393374,"url":"https://github.com/cultureamp/react-elm-components","last_synced_at":"2025-03-13T19:31:33.739Z","repository":{"id":9608898,"uuid":"62406230","full_name":"cultureamp/react-elm-components","owner":"cultureamp","description":"Write React components in Elm","archived":false,"fork":false,"pushed_at":"2024-01-30T18:36:06.000Z","size":442,"stargazers_count":778,"open_issues_count":18,"forks_count":60,"subscribers_count":24,"default_branch":"master","last_synced_at":"2024-04-15T11:54:29.802Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-elm-components","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cultureamp.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-07-01T16:31:45.000Z","updated_at":"2024-04-17T19:00:58.784Z","dependencies_parsed_at":"2022-08-07T05:01:10.143Z","dependency_job_id":"ac43e301-e8bc-4d82-976e-5e9e331d5db8","html_url":"https://github.com/cultureamp/react-elm-components","commit_stats":{"total_commits":74,"total_committers":9,"mean_commits":8.222222222222221,"dds":"0.43243243243243246","last_synced_commit":"af864e0e349692aad949b713c1915f76c7498c3b"},"previous_names":["evancz/react-elm-components"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cultureamp%2Freact-elm-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cultureamp%2Freact-elm-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cultureamp%2Freact-elm-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cultureamp%2Freact-elm-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cultureamp","download_url":"https://codeload.github.com/cultureamp/react-elm-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243469162,"owners_count":20295699,"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-07-30T17:00:51.356Z","updated_at":"2025-03-13T19:31:33.170Z","avatar_url":"https://github.com/cultureamp.png","language":"Elm","funding_links":[],"categories":["Elm"],"sub_categories":[],"readme":"# Write React components in Elm\n\nThis package makes it easy to turn Elm code into React components.\n\nCompanies that use [Elm](http://elm-lang.org/) in production usually start with a single component. So if you want to use Elm at work, start with a small experiment. Do people think it is nice? Do more! Do people think it sucks? Do less!\n\nRead more about how to use Elm at work [here](http://elm-lang.org/blog/how-to-use-elm-at-work).\n\n## Example\n\n  - Emoji Chat Room \u0026mdash; [Demo](http://evancz.github.io/react-elm-components) / [Code](example)\n\n\n\n## Usage\n\nAfter you have compiled an Elm program to JavaScript, you can embed it in React like this:\n\n```javascript\nimport Elm from 'react-elm-components'\nimport { Todo } from '../dist/elm/todomvc.js'\n\nfunction render() {\n\treturn \u003cElm src={Todo} /\u003e\n}\n```\n\n\n### Flags\n\nSometimes you want to give your Elm program some **flags** on start up. For example, maybe your `Todo` module needs to get an array of todos. You would write something like this:\n\n```javascript\nimport Elm from 'react-elm-components'\nimport { Todo } from '../dist/elm/todomvc.js'\n\nfunction render() {\n\tvar flags = { todos: [\"Get Milk\", \"Do Laundry\"] };\n\treturn \u003cElm src={Todo} flags={flags} /\u003e\n}\n```\n\nThese flags will be given to the Elm program, allowing you to do some setup work in JS first.\n\n\n### JavaScript/Elm Interop\n\nAs your Elm program gets fancier, you will probably need to interact with JavaScript. We do this with [**ports**](http://guide.elm-lang.org/interop/javascript.html). Think of these as holes in the side of an Elm program that let you pass messages back-and-forth.\n\nSo maybe we extend our `Todo` app to allow outsiders to register new tasks through the `todos` port. And maybe we also expose `numActiveTodos` so that the outsider can know how much work you have left. You would set it up like this:\n\n```javascript\nimport Elm from 'react-elm-components'\nimport { Todo } from '../dist/elm/todomvc.js'\n\nfunction render() {\n\treturn \u003cElm src={Todo} ports={setupPorts} /\u003e\n}\n\nfunction setupPorts(ports) {\n\tports.numActiveTodos.subscribe(function(n) {\n\t\tconsole.log(n);\n\t});\n\n\tports.todos.send(\"Invent the Universe\");\n\tports.todos.send(\"Bake an Apple Pie\");\n}\n```\n\nIn the `setupPorts` function, we first subscribe to the `numActiveTodos` port. Whenever the number of active todos changes, we will run that function and log the number on the console. After that, we send two values through the `todos` port. This will add both of these into the model *and* trigger the `numActiveTodos` callback twice.\n\n\n## Advanced Usage\n\nOnce the Elm component is initialized, changing the `flags` and `ports` properties will do nothing. So here are some tricks that may help you out:\n\n  1. If you want to reinitialize your Elm component, add a different `key` to the old and new components. This way old one is destroyed and replaced by the new one.\n  2. If you want to mess with ports, you can save the `ports` object into your `state` and access it later.\n  3. This package is super simple. Fewer than 20 lines. Check out the implementation and do it different if you want!\n\n\n## Angular, Ember, etc.\n\nIf you want to embed Elm in Angular or Ember or whatever else, you are in luck!\n\n[The implementation](index.js) is under 20 lines, mostly React-related. The important lines are basically running the following program at the correct time:\n\n```javascript\nvar Elm = require('../dist/elm/todomvc.js');\nvar app = Elm.Todo.embed(node, flags);\nsetupPorts(app.ports)\n```\n\nSo if you are interested in embedding Elm in something else, do the same trick! You can get more complete docs on embedding Elm in HTML [here](http://guide.elm-lang.org/interop/html.html) and JavaScript interop [here](http://guide.elm-lang.org/interop/javascript.html). Let the community know if you make something!\n\n\n---\n\nreact-elm-components is maintained by the Front End Capability Team at Culture Amp.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcultureamp%2Freact-elm-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcultureamp%2Freact-elm-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcultureamp%2Freact-elm-components/lists"}