@tikpage/reactjs-popup/docs/mds/2.getStarted.md

React Popup Component - Modals,Tooltips and Menus — All in one

---
id: getting-started
position: 2
path: Getting Started
title: React Popup Component - Modals,Tooltips and Menus —  All in one
description: A Simple React popup component.Use it as a tooltip,modal,sub-menu and match more ...
---

## Installing / Getting started

This package is available in npm repository as `reactjs-popup`. It will work correctly with all popular bundlers.

```bash
npm install reactjs-popup --save
```

Using yarn

```bash
yarn add reactjs-popup -s
```

> This package also depends on react and prop-types. Please make sure you have those installed as well.

## Include the Component

To start using `reactjs-popup` you just need to import the component from the `reactjs-popup` package.

```javascript
import React from "react";
import Popup from "reactjs-popup";

const PopupExample = () => (
  <Popup trigger={<button> Trigger</button>} position="right center">
    <div>Popup content here !!</div>
  </Popup>
);
```

if you need more control over your component `reactjs-popup` provide function as child.

```jsx live=true

const PopupExample = () => (
  <Popup trigger={<button>Trigger</button>} position="top left">
    {close => (
      <div>
        Content here
        <a className="close" onClick={close}>
          &times;
        </a>
      </div>
    )}
  </Popup>
);

render(<PopupExample />);
```

> More Example in use Cases section