Skip to content

Instantly share code, notes, and snippets.

@simbathesailor
Created August 6, 2020 17:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save simbathesailor/e5afd9dc846f46c519d4dea8bc76943a to your computer and use it in GitHub Desktop.
Save simbathesailor/e5afd9dc846f46c519d4dea8bc76943a to your computer and use it in GitHub Desktop.
outside-react-to-react.jsx
import React from "react"
import Modal from "components/Modal"
import styled, { css } from "styled-components"
import { Button } from "components"
import PropTypes from "prop-types"
const MessageContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 200px;
`
const MessageContent = styled.div`
margin-bottom: 24px;
`
const bodyStyles = css`
padding: 0;
overflow: auto;
background: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0px 30px;
`
// eslint-disable-next-line
let toggleModal = () => {}
function ModalFromOutsideReact(props) {
const [show, setShow] = React.useState(false)
const [data, setData] = React.useState(null)
toggleModal = (showVal, dataFromAPI) => {
setData(dataFromAPI)
setShow(showVal)
}
return (
<>
<Modal
id="portal-root"
show={show}
bodyStyles={bodyStyles}
closeModal={() => {
setShow(false)
}}
>
<MessageContainer>
<MessageContent>
{data?.message ||
"Content out of sync, Please refresh the browser window"}
</MessageContent>
<Button
onClick={() => {
window.location.reload()
}}
btnType="primary"
>
Reload
</Button>
</MessageContainer>
</Modal>
</>
)
}
ModalFromOutsideReact.propTypes = {}
export { toggleModal }
export default ModalFromOutsideReact
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment