react-floating

Demo

https://z4o4z.github.io/react-floating/dist/demo/

Installation

npm i react-floating -S

How to use?

import React from 'react';
import ReactDOM from 'react-dom';

import ReactFloating from '../index';

const root = document.getElementById('root');

ReactDOM.render(
	<div className="wrapper">
		<Floating maxRange={10} maxMobileRange={20} scale={1.1} className="bg"/>

		<Floating maxRange={20} maxMobileRange={30} reverse={true} className="meteor-1">
			<img src="http://pre14.deviantart.net/014b/th/pre/i/2012/235/6/1/meteorit_by_morsprinstock-d5c5tix.png"/>
		</Floating>

		<Floating maxRange={5} maxMobileRange={10} scale={0.5} reverse={true} className="meteor-2">
			<img src="http://pre14.deviantart.net/014b/th/pre/i/2012/235/6/1/meteorit_by_morsprinstock-d5c5tix.png"/>
		</Floating>

		<Floating maxRange={30} maxMobileRange={40} scale={0.5} reverse={true} className="meteor-3">
			<img src="http://pre14.deviantart.net/014b/th/pre/i/2012/235/6/1/meteorit_by_morsprinstock-d5c5tix.png"/>
		</Floating>

		<Floating maxRange={20} maxMobileRange={20} className="msg">
			<p>React Floating</p>
		</Floating>
	</div>,
	root
);

Api

• maxRange - maximum range for desktop between center and one of the edges
• maxMobileRange - maximum range for mobile between center and one of the edges
• reverse - move in the opposite direction
• className
• style
• scale

Support events

• mousemove - for desktop
• deviceorientation - for mobile