Popularity
2.3
Declining
Activity
0.0
Stable
112
4
19
Monthly Downloads: 0
Programming language: JavaScript
License: ISC License
Tags:
UI Components
Miscellaneous
react-dnr alternatives and similar libraries
Based on the "Miscellaneous" category.
Alternatively, view react-dnr alternatives based on common mentions on social networks and blogs.
-
react-facebook
Facebook components like a Login button, Like, Share, Chat, Comments, Page or Embedded Post -
react-avatar
Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user. -
react-file-reader-input
React file input component for complete control over styling and abstraction from file reading. -
react-swipe-to-delete-ios
A simple React component to reproduce the way iOS deletes an item in a list -
react-headings
โ Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO. -
react-advanced-news-ticker
A powerful, flexible, lightweight and animated vertical news ticker component for React. -
@restpace/schema-form
A React component package for generating forms based on (almost) the full power of JSON Schema
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Promo
surveyjs.io
Do you think we are missing an alternative of react-dnr or a related project?
README
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"));