react-DnR

==============

Draggable and Resizable window build with React.js.

Try it out here: http://yongxu.ren/react-DnR/

Installation

The easiest way to use react-DnR is to install it from npm and include it in your React build process (using Webpack, Browserify, etc).

npm install --save react-dnr

Example

import React from "react";
import ReactDOM from "react-dom";
import DnR from '../modules/DnR';

import {OSXTheme, WindowsTheme} from '../modules/themes';
const paneStyle = {
	width: '80%',
	height: '50%',
	top: '25%',
	left: '10%',
	backgroundColor: 'rgba(0, 0, 0, 0.2)'
};

const buttonStyle = {
		paddingLeft: 10,
		textAlign: 'center'
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      minimize: false
    };
		this.OSX = OSXTheme({
			title: 'OSX Theme',
			onClose: ()=>this.refs.subdnr.minimize(),
			onMinimize: ()=>this.refs.subdnr.minimize(),
			onMaximize: ()=>this.refs.subdnr.maximize(),
		});
		this.Windows = WindowsTheme({
			title: 'React DnR',
			onClose: ()=>this.refs.dnr.minimize(),
			onMinimize: ()=>this.refs.dnr.minimize(),
			onMaximize: ()=>this.refs.dnr.maximize(),
		});
	}
	render() {
		return (
			<div style={{
				background:'#3a7bd5',
				top: 0,
				left : 0,
				width: '100%',
				height: '100%',
				position: 'fixed',
				backgroundImage: `url(${require('../img/bg1.png')})`
			}}>
				<div style={{
					display: 'flex',
					alignItems: 'center',
					verticalAlign: 'baseline',
					padding: 10,
				}}>
					<button
						style={buttonStyle}
						onClick={()=>this.refs.dnr.minimize()}>
						minimize
					</button>
					<button
						style={buttonStyle}
						onClick={()=>this.refs.dnr.maximize()}>
						maximize
					</button>
					<button
						style={buttonStyle}
						onClick={()=>this.refs.dnr.restore()}>
						restore
					</button>
				</div>
				<DnR
					ref='dnr'
					{...this.Windows}
					cursorRemap={(c) => c === 'move' ? 'default' : null}
					style={paneStyle}>
					<button
						onClick={()=>this.refs.subdnr.minimize()}>
						minimize
					</button>
					<button
						onClick={()=>this.refs.subdnr.transform({
							top: 0,
							left: 0,
							width: this.refs.dnr.getFrameRect().width,
							height: this.refs.dnr.getFrameRect().height})}>
						maximize
					</button>
					<button
						onClick={()=>this.refs.subdnr.restore()}>
						restore
					</button>
					<DnR
						ref='subdnr'
						{...this.OSX}
						cursorRemap={(c) => c === 'move' ? 'default' : null}
						style={paneStyle}
						boundary={{top: 0}}>
						content
					</DnR>
				</DnR>
			</div>
		);
	}
}


ReactDOM.render(<App/>, document.getElementById("main"));