p5.js-web-editor/client/components/useAsModal.jsx

30 lines
670 B
React
Raw Normal View History

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>
2020-08-07 16:24:25 +02:00
</div>);
return [toggle, wrapper];
};