import { useState } from 'react'
import Button from '../Button'
import Span from '../typography/Span'
import Div from '../Div'
import Portal from './'
import { u } from 'startupjs'

# Portal

The portal component renders its children into a new "subtree" outside of current DOM hierarchy.

```jsx
import { Portal } from '@startupjs/ui'
```

## Initialization

It is necessary to wrap the part of the application components on top of which the Portal will be displayed

```jsx
function Layout ({ children }) {
  return (
    <Portal.Provider>
      <Layout>{children}</Layout>
    </Portal.Provider>
  )
}
```

## Simple example

```jsx example
const [visible, setVisible] = useState(false)

const contentStyle = {
  position: 'absolute',
  top: 0,
  left: 0,
  width: u(25),
  height: u(20),
  backgroundColor: '#444',
  justifyContent: 'center',
  alignItems: 'center'
}

const textStyle = {
  color: '#fff',
  marginBottom: u(2),
  fontSize: u(3)
}

return (
  <Div>
    <Button onPress={()=> setVisible(true)}>Open</Button>
    {visible &&
      <Portal>
        <Div style={contentStyle}>
          <Span style={textStyle}>Content</Span>
          <Button
            variant='flat'
            onPress={()=> setVisible(false)}
          >Close</Button>
        </Div>
      </Portal>
    }
  </Div>
)
```