Menu
There is a modal in this answer https://stackoverflow.com/a/26789089/883571 which is creating a React-based Modal by appending it to <body>. However, I found it not compatible with the transition addons provided by React.
How to create one with transitions(during enter and leave)?
264
jsx import React, { useState } from "react"; import styles from "./App. module. css"; const App = () => { const [isOpen, setIsOpen] = useState(false); return ( <main> <button className={styles. primaryBtn} onClick={() => setIsOpen(true)}> Open Modal </button> // ...
Using setAppElement This example shows how to use setAppElement to properly hide your application from screenreaders and other assistive technologies while the modal is open. You'll notice in this example that the aria-hidden attribute is applied to the #main div rather than the document body. setAppElement example.
push() - append content in array. unshift() - prepend content in array. Append element in react by using below function : Appending content in array by using push function and with the help of state we are render the content in browser.
At react conf 2015, Ryan Florence demonstrated using portals. Here's how you can create a simple Portal component...
var Portal = React.createClass({ render: () => null, portalElement: null, componentDidMount() { var p = this.props.portalId && document.getElementById(this.props.portalId); if (!p) { var p = document.createElement('div'); p.id = this.props.portalId; document.body.appendChild(p); } this.portalElement = p; this.componentDidUpdate(); }, componentWillUnmount() { document.body.removeChild(this.portalElement); }, componentDidUpdate() { React.render(<div {...this.props}>{this.props.children}</div>, this.portalElement); } }); and then everything you can normally do in React you can do inside of the portal...
<Portal className="DialogGroup"> <ReactCSSTransitionGroup transitionName="Dialog-anim"> { activeDialog === 1 && <div key="0" className="Dialog"> This is an animated dialog </div> } </ReactCSSTransitionGroup> </Portal> You can also have a look at Ryan's react-modal, although I haven't actually used it so I don't know how well it works with animation.
95
I wrote the module react-portal that should help you.
Usage:
import { Portal } from 'react-portal'; <Portal> This text is portaled at the end of document.body! </Portal> <Portal node={document && document.getElementById('san-francisco')}> This text is portaled into San Francisco! </Portal> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
