Popularity
2.3
Declining
Activity
0.0
Stable
112
4
19
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-pdf
Display PDFs in your React app as easily as if they were images. -
typography
A powerful toolkit for building websites with beautiful design -
react-resizable-and-movable
๐ฑ A resizable and draggable component for React. -
react-simple-chatbot
:speech_balloon: Easy way to create conversation chats -
react-awesome-query-builder
User-friendly query builder for React -
react-json-tree
React JSON Viewer Component, Extracted from redux-devtools. -
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-images-uploader
React.js component for uploading images to the server -
react-darkreader
๐ A React Hook for adding a dark / night mode to your site. -
react-file-reader-input
React file input component for complete control over styling and abstraction from file reading. -
react-apple-signin-auth
๏ฃฟ Apple signin for React using the official Apple JS SDK -
react-swipeable-list
Swipeable list component for React supporting several behaviours (e.g. iOS) -
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-filter-control
The react UI component for building complex filter criteria -
react-avatar-generator
Generate fun kaleidoscope for user avatars. -
react-demo-tab
๐ React component to easily create demos of other components -
@restpace/schema-form
A React component package for generating forms based on (almost) the full power of JSON Schema -
react-advanced-news-ticker
A powerful, flexible, lightweight and animated vertical news ticker component for React. -
react-searchbox-awesome
The coolest searchbox for React.js! -
react-mouse-select
A simple react library for selecting elements by moving the mouse -
react-customizable-chat-bot
Customizable chat bot library using React and Typescript -
react-pulse-text
React component that allows you to animate the text you want -
react-color-scroll
Blend through colors as you scroll down the page. -
react-cloud-letter
Wrap your letter in lovely cloud-like shape with React. -
react-pagespeed-score
A React component for display a dial-type chart of PageSpeed Insights.
Appwrite - The open-source backend cloud platform
The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more!
Promo
appwrite.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"));