https://github.com/anishmprasad/rpopover

A lightweight popover component for react.
https://github.com/anishmprasad/rpopover

popover react react-popover react-popup reactjs

Last synced: 7 days ago
JSON representation

A lightweight popover component for react.

• Host: GitHub
• URL: https://github.com/anishmprasad/rpopover
• Owner: anishmprasad
• License: apache-2.0
• Created: 2019-07-14T12:39:04.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-25T17:37:12.000Z (over 1 year ago)
• Last Synced: 2024-10-29T00:50:30.524Z (17 days ago)
• Topics: popover, react, react-popover, react-popup, reactjs
• Homepage:
• Size: 71.3 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rpopover

A simple popover component for React.

### Installation

```

// with npm

$ npm install react-extensions --save

// with yarn

$ yarn add react-extensions

// with npm

$ npm install rpopover --save

// with yarn

$ yarn add rpopover

```

### Usage

Here is a quick example to get you started, **it's all you need**:

```jsx

import Popover from 'rpopover';

import 'rpopover/styles.min.css';

function ProfileSvg() {

	return (

		

			

		

	);

}

export default function PopoverContainer(props) {

	return (

		


			
rpopover

			

						


							


								

									

										

									

									rpopover

								

							

						

					

				}

				dropdownComponent={
dropdown components
}

				dropdownAlignment='right'

				onHover={false}

				closeOnScroll={false}

				show={true}

			/>

		

	);

}

```


### Props

| Name                   | Type       | Required | Description                          |

| ---------------------- | ---------- | -------- | ------------------------------------ |

| containerClass         | `string`   | `true`   | custom class for container           |

| buttonComponent        | `string`   | `true`   | the component for button             |

| buttonComponentClass   | `string`   | `true`   | custom class for button              |

| dropdownComponent      | `object`   | `true`   | the component for dropdown           |

| dropdownComponentClass | `object`   | `true`   | custom class for dropdown            |

| dropdownAlignment      | `object`   | `true`   | the component for dropdown alignment |

| onHover                | `boolean`  | `true`   | option for onHover                   |

| closeOnScroll          | `boolean`  | `true`   | option for closeOnScroll             |

| show                   | `boolean`  | `true`   | option for show                      |

| caret                  | `boolean`  | `true`   | enable caret in popover              |

### TODO

-   [x] Minification

-   [x] Documentation

-   [x] CSS Polishing and Transitions

-   [x] Production Level

### License

Apache 2.0