How to make simple overlay container in React

Issue #699

Use term ZStack like in SwiftUI, we declare container as relative position. For now it uses only 2 items from props.children but can be tweaked to support mutiple

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class App extends React.Component {
render() {
return (
<ZStack>
<Header />
<div css={css`
padding-top: 50px;
`}>
<Showcase factory={factory} />
<Footer />
</div>
</ZStack>
)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/** @jsx jsx */
import React from 'react';
import { css, jsx } from '@emotion/core'

export default function ZStack(props) {
return (
<div css={css`
position: relative;
`}>
<div >
{props.children[0]}
</div>
<div css={css`
position: absolute;
top: 0;
left: 0;
width: 100%;
`}>
{props.children[1]}
</div>
</div>
)
}

Comments