You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					64 lines
				
				2.4 KiB
			
		
		
			
		
	
	
					64 lines
				
				2.4 KiB
			| 
								 
											3 years ago
										 
									 | 
							
								# React Popper
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								[](https://github.com/popperjs/react-popper/actions?query=workflow%3A%22Unit+Tests%22)
							 | 
						||
| 
								 | 
							
								[](https://www.npmjs.com/package/react-popper)
							 | 
						||
| 
								 | 
							
								[](https://www.npmjs.com/package/react-popper)
							 | 
						||
| 
								 | 
							
								[](https://david-dm.org/souporserious/react-popper)
							 | 
						||
| 
								 | 
							
								[](https://github.com/prettier/prettier)
							 | 
						||
| 
								 | 
							
								[](https://spectrum.chat/popper-js/react-popper)
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								React wrapper around [Popper](https://popper.js.org).
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								**important note:** Popper is **not** a tooltip library, it's a _positioning
							 | 
						||
| 
								 | 
							
								engine_ to be used to build features such as (but not restricted to) tooltips.
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## Install
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								Via package managers:
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								```bash
							 | 
						||
| 
								 | 
							
								# With npm
							 | 
						||
| 
								 | 
							
								npm i react-popper @popperjs/core
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								# With Yarn
							 | 
						||
| 
								 | 
							
								yarn add react-popper @popperjs/core
							 | 
						||
| 
								 | 
							
								```
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								**Note:** `@popperjs/core` must be installed in your project in order for
							 | 
						||
| 
								 | 
							
								`react-popper` to work.
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								Via `script` tag (UMD library exposed as `ReactPopper`):
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								```html
							 | 
						||
| 
								 | 
							
								<script src="https://unpkg.com/react-popper/dist/index.umd.js"></script>
							 | 
						||
| 
								 | 
							
								```
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## Documentation
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								The full documentation can be found on the official Popper website:
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								http://popper.js.org/react-popper
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## Running Locally
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								#### clone repo
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								`git clone git@github.com:popperjs/react-popper.git`
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								#### move into folder
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								`cd ~/react-popper`
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								#### install dependencies
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								`npm install` or `yarn`
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								#### run dev mode
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								`npm run demo:dev` or `yarn demo:dev`
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								#### open your browser and visit:
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								`http://localhost:1234/`
							 |