---
id: component-api
position: 3
path: Component API
title: React Popup | Component API
description: The reactjs-popup API is inspired by semantic popup docs
---

import InputFocus from './../src/examples/InputFocus.js'

### Component API

This is the list of props that you should probably know about👇

#### trigger

> {node,func} | require

Element to be rendered in-place where the popup is defined
```jsx
// need to forward ref if you are trying to use a function trigger with React Component

// Works
  <Popup
    trigger={open => (
      <button className="button">Trigger - {open ? "Opened" : "Closed"}</button>
    )}
    position="right center"
    closeOnDocumentClick
  >
    <span> Popup content </span>
  </Popup>

// works too
const CustomButton = React.forwardRef(({open , ...props}, ref) => (
  <button className="button" ref={ref} {...props}>
    Trigger - {props.open ? 'Opened' : 'Closed'}
  </button>
));

<Popup
    trigger={open => <CustomButton  open={open}/>}
    position="right center"
    closeOnDocumentClick
  >
    <span> Popup content </span>
</Popup>


```


#### open

> {bool}

Take full control over popup state.

#### defaultOpen

> bool | false

default open value : initial state

#### on

> enum,Array | `'hover'`

Events triggering the popup. Enums or Array of : `'hover' 'click' 'focus'` .

### children

> node or func

Popup content

#### position

> {enum, Array} | `'bottom center'`

Position for the popover. Best position(calculated by checking against overlap with boundary element) is applied in the order specified. <br /> Enums:`'top left' 'top right' 'bottom right' 'bottom left' 'right center' 'left center' 'top center' 'bottom center' 'center center'`

#### offsetX

> number | 0

OffsetX in pixels to be applied to the Popup.

#### offsetY

> number | 0

OffsetY in pixels to be applied to the Popup.

#### arrow

> bool | true

Arrow element. Note that this should be set to `false` if position is set to `'center center'`

#### modal

> bool| false

A modal component when modal ={true}

#### disabled

> bool | false

Disable the popup from showing up and close it if it's open

#### lockScroll

> bool | false

Disable body scroll when modal is open ( work only with modal)

#### closeOnDocumentClick

> bool | true

close popup when the overlay clicked

#### closeOnEscape

> bool | true

close popup when Escape clicked

#### repositionOnResize

> bool | true

recalculate position when window is resized

#### mouseEnterDelay

> number | 100
> Milliseconds to wait before opening on mouse over

#### mouseLeaveDelay

> number | 100

Milliseconds to wait before closing on mouse leave

#### onOpen

> func

Function called on open event

#### onClose

> {func}

function called on close event

#### contentStyle

> object

Custom popup content style |

#### overlayStyle

> object

Custom overlay style <br/> Note: `top` and `left` property will not be overridden. |

#### arrowStyle

> object

Custom arrow style <br/> Note: `transform` property will not be overridden. |

#### className

> string

Custom Popup ClassName <br/> Note: this class name will be merged with the component element: ex `className='foo'` means `foo-arrow` to style arrow, `foo-overlay` to style overlay and `foo-content` to style popup content |

#### keepTooltipInside

> bool, string | true

html selector, class name or id element that the tooltip must be inside (defaults to `window` if keepTooltipInside = true) default false |

### Example : on focus

```jsx live=true

const PopupOnFocus = () => (
  <Popup
    trigger={<input type="text" placeholder="start typing ... " />}
    on="focus"
    position="top left"
    closeOnDocumentClick
  >
    <span> On focus popup event </span>
  </Popup>
);

render(<PopupOnFocus />);
```