p5.js-web-editor/client/components/useAsModal.jsx
2020-08-07 18:48:39 -03:00

29 lines
670 B
JavaScript

import React from 'react';
import styled from 'styled-components';
import { useModalBehavior } from '../utils/custom-hooks';
const BackgroundOverlay = styled.div`
position: absolute;
z-index: 2;
width: 100% !important;
height: 100% !important;
background: black;
opacity: 0.3;
`;
export default (Element, hasOverlay = false) => {
const [visible, toggle, setRef] = useModalBehavior();
const wrapper = () => (visible &&
<div>
{hasOverlay && <BackgroundOverlay />}
<div ref={setRef}>
{ (typeof (Element) === 'function')
? Element(toggle)
: Element}
</div>
</div>);
return [toggle, wrapper];
};