Skip to content
Dragable and Resizable window build with React.js
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
es6
img
lib
modules
src removed ; Jul 21, 2016
umd
.babelrc cursor is working Jan 21, 2016
.gitignore
LICENSE
README.md jsx comment is depriciated in new react versions Feb 20, 2018
index.html
package.json fixed bug, add umd module Jan 23, 2017
webpack.build.config.js
webpack.config.js changed image to inline Feb 12, 2016

README.md

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"));
You can’t perform that action at this time.