# PopupBase Props (свойства) для компонента PopupBase: [{"name":"isOpen","type":{"name":"boolean"}},{"name":"opened","type":{"name":"boolean"}},{"name":"placement","type":{"name":"enum","raw":"PopupPlacement","value":[{"value":"\"center\""},{"value":"\"top\""},{"value":"\"bottom\""},{"value":"\"right\""},{"value":"\"left\""},{"value":"\"top-right\""},{"value":"\"top-left\""},{"value":"\"bottom-right\""},{"value":"\"bottom-left\""}]}},{"name":"offset","type":{"name":"[number, number] | [string, string]"}},{"name":"frame","type":{"name":"string | RefObject<HTMLElement>"}},{"name":"children","type":{"name":"ReactNode"}},{"name":"overlay","type":{"name":"ReactNode"}},{"name":"zIndex","type":{"name":"string"}},{"name":"popupInfo","type":{"name":"PopupInfo"}},{"name":"withAnimation","type":{"name":"boolean"}},{"name":"draggable","type":{"name":"boolean"}},{"name":"resizable","type":{"name":"boolean | { disabled?: boolean; directions?: ResizeDirections; defaultSize?: { width?: number | undefined; height?: number | undefined; } | undefined; ... 6 more ...; hiddenIcons?: PopupPlacementMixed[] | undefined; } | undefined"}}] ### Провайдер контекста Поместите  `PopupBaseProvider`  в  корень приложения  или там, где будете применять PopupBase: 
### Использование PopupBase можно использовать как и на всем окне, так и в отдельном фрейме - свойство  `frame` .
Также это свойство поддержиавет передачу id элемента, в котором будет использоваться компонент.
Само позиционирование можно указать с помощью свойства  `placement` (center - по умолчанию; left, right, top, bottom и их комбинации),
а также определить отступы от точки с помощью  `offset` . 
## Подключение анимации Для подключения анимации нужно добавить параметр  `withAnimation` .
Само управление происходит с помощью классов через переменные  `endAnimation` ,  `endTransition`  из объекта  `popupBaseClasses`  для  `PopupBase` .
Для добавления анимации необходимо использовать класс  `.popup-base-root`  через переменную  `popupBaseClasses.root`  из пакета. Пример: 
или 
И в самом компоненте: 
## Draggable Чтобы иметь возможность перетаскивать Popup по экрану нужно включить свойство  `draggable` . Пример: 
## Resizable Чтобы иметь возможность растягивать Popup нужно настроить свойство  `resizable` . Формат следующий: 
Пример: