https://github.com/geovanisouza92/cycle-modal
Cycle.js Modal example using root outside app mountpoint (aka React Portals)
https://github.com/geovanisouza92/cycle-modal
cyclejs example modal react-portal
Last synced: 3 months ago
JSON representation
Cycle.js Modal example using root outside app mountpoint (aka React Portals)
- Host: GitHub
- URL: https://github.com/geovanisouza92/cycle-modal
- Owner: geovanisouza92
- Created: 2017-10-02T14:50:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-10-03T14:31:32.000Z (over 7 years ago)
- Last Synced: 2025-01-10T02:03:49.103Z (4 months ago)
- Topics: cyclejs, example, modal, react-portal
- Language: JavaScript
- Size: 52.7 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# cycle-modal
Inspired by [React Portals](https://reactjs.org/docs/portals.html) I made this simple example
# TL;DR
You 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)
# Long, try to read
So, 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).
When you think about a simple modal, you have two main concerns: Open and close the modal.
It'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.
Cycle.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).
So, React 16 came with this concept of "Portals", that allows you to render some component outside the React's root element.
Cycle.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.