# Portal Props (свойства) для компонента Portal: [{"name":"container","type":{"name":"HTMLElement | (() => HTMLElement)"}},{"name":"children","type":{"name":"ReactNode"}},{"name":"disabled","type":{"name":"boolean"}}] ## Использование
```tsx
import React, { useState, useRef } from 'react';
import { Portal, Button, BodyM } from '@salutejs/plasma-web';
export function App() {
const [show, setShow] = useState(false);
const containerRef = useRef(null);
return (
<>
<Button onClick={() => setShow(!show)}>{show ? 'Скрыть' : 'Показать'}</Button>
<div style={{padding: '1.25rem', marginBottom: '0.625rem', marginTop: '0.625rem', border: '1px solid'}}>
<BodyM style={{ marginBottom: '1.25rem' }}>Содержимое портала появится в нижнем блоке.</BodyM>
{show && containerRef.current && (
<Portal container={containerRef.current}>
<BodyM bold>Содержимое портала</BodyM>
</Portal>
)}
</div>
<div style={{padding: '1.25rem', marginBottom: '0.625rem', marginTop: '0.625rem', border: '1px solid'}} ref={containerRef} />
</>
);
}
```
### Disabled Отключить портал можно с помощью свойства  `disabled` .
В этом случае содержимое портала добавится внутрь родительского элемента.
```tsx
import React, { useState, useRef } from 'react';
import { Portal, Button, BodyM } from '@salutejs/plasma-web';
export function App() {
const [show, setShow] = useState(false);
const containerRef = useRef(null);
return (
<>
<Button onClick={() => setShow(!show)}>{show ? 'Скрыть' : 'Показать'}</Button>
<div style={{padding: '1.25rem', marginBottom: '0.625rem', marginTop: '0.625rem', border: '1px solid'}}>
<BodyM style={{ marginBottom: '1.25rem' }}>Содержимое портала появится в данном блоке.</BodyM>
{show && containerRef.current && (
<Portal disabled container={containerRef.current}>
<BodyM bold>Содержимое портала</BodyM>
</Portal>
)}
</div>
<div style={{padding: '1.25rem', marginBottom: '0.625rem', marginTop: '0.625rem', border: '1px solid'}} ref={containerRef} />
</>
);
}
```