{"id":17624858,"url":"https://github.com/geovanisouza92/cycle-modal","last_synced_at":"2025-08-31T19:39:15.987Z","repository":{"id":145443308,"uuid":"105546672","full_name":"geovanisouza92/cycle-modal","owner":"geovanisouza92","description":"Cycle.js Modal example using root outside app mountpoint (aka React Portals)","archived":false,"fork":false,"pushed_at":"2017-10-03T14:31:32.000Z","size":54,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-22T19:08:37.533Z","etag":null,"topics":["cyclejs","example","modal","react-portal"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"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/geovanisouza92.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-02T14:50:01.000Z","updated_at":"2024-09-30T08:54:19.000Z","dependencies_parsed_at":"2023-07-10T16:45:48.431Z","dependency_job_id":null,"html_url":"https://github.com/geovanisouza92/cycle-modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/geovanisouza92/cycle-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geovanisouza92%2Fcycle-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geovanisouza92%2Fcycle-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geovanisouza92%2Fcycle-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geovanisouza92%2Fcycle-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geovanisouza92","download_url":"https://codeload.github.com/geovanisouza92/cycle-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geovanisouza92%2Fcycle-modal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273032901,"owners_count":25034067,"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","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["cyclejs","example","modal","react-portal"],"created_at":"2024-10-22T22:06:05.080Z","updated_at":"2025-08-31T19:39:15.961Z","avatar_url":"https://github.com/geovanisouza92.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# cycle-modal\n\nInspired by [React Portals](https://reactjs.org/docs/portals.html) I made this simple example\n\n# TL;DR\n\nYou can mount as many \"Portals\" as you like, using the power of drivers without bloating your components with side effects. Just structure (HTML) and logic (JS / Streams)\n\n# Long, try to read\n\nSo, Cycle.js uses this concept of separating logic from side-effects. The logic is inside your components, while the side-effects are handled by [drivers](https://cycle.js.org/drivers.html).\n\nWhen you think about a simple modal, you have two main concerns: Open and close the modal.\n\nIt's quite common, specially when using third-party libs like Bootstrap, to the modal be \"attached\" to `document.body` with the required styling, content and behavior.\n\nCycle.js, React, Vue, Angular, and many other frameworks has this concept of \"mounting\" the app inside a root element. The required approach for showing a modal sometimes require you mount-it outside the app's root element, e.g., when your app is embedded inside another bigger app (maybe just a section on a static site).\n\nSo, React 16 came with this concept of \"Portals\", that allows you to render some component outside the React's root element.\n\nCycle.js on the other hand, handles this using multiple DOM drivers, where you can direct portions of your component on other root elements, while maintaning all the logic in one place.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeovanisouza92%2Fcycle-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeovanisouza92%2Fcycle-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeovanisouza92%2Fcycle-modal/lists"}