react-reorder - npm Package Compare versions

.babelrc

.eslintrc-examples.json

.eslintrc-src.json

.eslintrc-tests.json

.mocharc

.nvmrc

.nycrc

circle.yml

examples/src/js/styles.js

scripts/deploy.sh

src/index.js

tests/basic.test.js

tests/children-stub.test.js

tests/helpers/children-stub.js

tests/helpers/mount.js

tests/helpers/test-setup.js

tests/methods.test.js

tests/mount.test.js

450

examples/src/js/index.js

		@@ -1,127 +0,373 @@
		'use strict';
		import './styles';
		import React, { Component } from 'react';
		import ReactDOM from 'react-dom';
		import ReactStyleSheets from 'react-style-sheets';
		import Immutable from 'immutable';
		import Reorder, { reorderImmutable, reorderFromToImmutable } from '../../../src/index';

		var React = require('react');
		var ReactDOM = require('react-dom');
		var Reorder = require('../../../index');

		var ListItem = React.createClass({
		render: function () {
		return React.createElement('div', {
		className: 'inner',
		style: {
		color: this.props.item.color
		}
		}, this.props.sharedProps ? this.props.sharedProps.prefix : undefined, this.props.item.name);
		}
		});

		var Main = React.createClass({
		callback: function (event, item, index, newIndex, list) {
		this.setState({arr: list});
		const classNames = ReactStyleSheets.createUniqueClassStyles({
		app: {
		position: 'relative',
		width: '100%',
		maxWidth: 768,
		overflow: 'hidden',
		margin: 'auto',
		padding: 8
		},
		itemClicked: function (event, item) {
		this.setState({
		clickedItem: item === this.state.clickedItem ? undefined : item
		});
		myList: {
		float: 'left',
		width: '100%',
		height: 'auto',
		border: [1, 'solid', 'grey'],
		padding: 8,
		listStyle: 'none'
		},
		itemClicked2: function (event, item) {
		this.setState({clickedItem2: item});
		myList1: {
		height: 200,
		overflow: 'auto',
		paddingBottom: 0
		},
		disableToggled: function () {
		this.setState({disableReorder: !this.state.disableReorder});
		myList2: {
		overflowX: 'auto',
		overflowY: 'hidden',
		height: 62,
		whiteSpace: 'nowrap'
		},
		prefixChanged: function (event) {
		var target = event.currentTarget;
		this.setState({prefix: target.value});
		mylist3: {},
		multiList: {
		width: '50%',
		minHeight: 100,
		maxHeight: 400,
		overflowX: 'hidden',
		overflowY: 'auto'
		},
		listItem: {
		float: 'left',
		width: '100%',
		height: 46,
		padding: 12,
		border: [2, 'solid', 'lightblue'],
		marginBottom: 8,
		transformOrigin: '50% 50%'
		},
		listItem2: {
		float: 'none',
		width: 80,
		marginBottom: 0,
		whiteSpace: 'nowrap',
		overflow: 'hidden',
		display: 'inline-block'
		},
		listItem3: {
		float: 'left',
		width: '50%'
		},
		multiListItem: {},
		placeholder: {
		backgroundColor: '#CCC',
		border: [1, 'solid', '#CCC']
		},
		customPlaceholder: {
		opacity: 0.2
		},
		dragged: {
		backgroundColor: '#EEE',
		transform: 'scale(0.98, 0.98)',
		opacity: 0.8
		},
		selected: {
		border: [2, 'solid', 'red']
		},
		contentHolder: {
		display: 'table',
		width: '100%'
		},
		itemName: {
		display: 'table-cell'
		},
		input: {
		display: 'table-cell',
		width: '100%'
		}
		});

		// ----
		class Main extends Component {
		constructor () {
		super();

		getInitialState: function () {
		var list = [];
		this.state = {
		list: Immutable.List(Immutable.Range(0, 10).map(function (value) {
		return {
		name: ['Thing', value].join(' '),
		color: ['rgb(', (value + 1) * 25, ',', 250 - ((value + 1) * 25), ',0)'].join('')
		};
		})),
		listA: Immutable.List(Immutable.Range(0, 5).map(function (value) {
		return {
		name: ['List A - Item', value].join(' '),
		color: ['rgb(', (value + 1) * 25, ',', 250 - ((value + 1) * 25), ',0)'].join('')
		};
		})),
		listB: Immutable.List(Immutable.Range(0, 5).map(function (value) {
		return {
		name: ['List B - Item', value].join(' '),
		color: ['rgb(', (value + 1) * 25, ',', 250 - ((value + 1) * 25), ',0)'].join('')
		};
		})),
		prefix: 'Prefix'
		};
		}

		for (var i = 0; i < 10; i += 1) {
		list.push({name: ['Thing', i].join(' '), color: ['rgb(',(i + 1) * 25, ',', 250 - ((i + 1) * 25),',0)'].join('')});
		onReorder (event, previousIndex, nextIndex) {
		const list = reorderImmutable(this.state.list, previousIndex, nextIndex);

		this.setState({
		list: list
		});
		}

		onReorderGroup (event, previousIndex, nextIndex, fromId, toId) {
		if (fromId === toId) {
		const list = reorderImmutable(this.state[fromId], previousIndex, nextIndex);

		this.setState({
		[fromId]: list
		});
		} else {
		const lists = reorderFromToImmutable({
		from: this.state[fromId],
		to: this.state[toId]
		}, previousIndex, nextIndex);

		this.setState({
		[fromId]: lists.from,
		[toId]: lists.to
		});
		}
		}

		return {
		arr: list,
		prefix: 'Prefix'
		};
		},
		render: function () {
		return React.createElement('div', {className: 'app'},
		onDisableToggle () {
		this.setState({
		disableReorder: !this.state.disableReorder
		});
		}

		React.createElement('p', null, React.createElement('strong', null, 'Lock horizontal')),
		React.createElement('small', null, 'This example has a hold time of 500 milliseconds before dragging begins, allowing for other events like clicking / tapping to be attached'),
		onPrefixChange (event) {
		const target = event.currentTarget;

		React.createElement('p', null, 'Selected item: ', this.state.clickedItem ? this.state.clickedItem.name : undefined),
		this.setState({
		prefix: target.value
		});
		}

		React.createElement('p', null,
		'Prefix (shared props): ',
		React.createElement('input', {
		type: 'text',
		onChange: this.prefixChanged,
		value: this.state.prefix
		})
		),
		// ----

		React.createElement(Reorder, {
		itemKey: 'name',
		lock: 'horizontal',
		holdTime: '500',
		list: this.state.arr,
		template: ListItem,
		callback: this.callback,
		listClass: 'my-list',
		itemClass: 'list-item',
		itemClicked: this.itemClicked,
		selected: this.state.clickedItem,
		selectedKey: 'name',
		sharedProps: {
		prefix: [this.state.prefix, ': '].join('')
		}}),
		render () {
		return (
		<div className={classNames.app}>
		<h1>
		React Reorder
		</h1>
		<h2>
		Examples
		</h2>
		<h3>
		Lock horizontal
		</h3>
		<p>
		This example has a hold time of 500 milliseconds before dragging begins,
		allowing for other events like clicking / tapping to be attached
		</p>
		<p>
		Selected item: {this.state.clickedItem ? this.state.clickedItem.name : undefined}
		</p>
		<p>
		{'Prefix: '}
		<input type="text" value={this.state.prefix} onChange={this.onPrefixChange.bind(this)} />
		</p>

		React.createElement('p', null, React.createElement('strong', null, 'Lock vertical')),
		React.createElement('small', null, 'This example has a hold time of 250 milliseconds'),
		<Reorder
		reorderId="myList1"
		component="ul"
		className={[classNames.myList, classNames.myList1].join(' ')}
		placeholderClassName={classNames.placeholder}
		draggedClassName={classNames.dragged}
		lock="horizontal"
		holdTime={500}
		onReorder={this.onReorder.bind(this)}
		placeholder={<div className={[classNames.listItem, classNames.customPlaceholder].join(' ')} />}
		>
		{
		this.state.list.map(function (item) {
		return (
		<li
		key={item.name}
		className={classNames.listItem}
		style={{color: item.color}}
		>
		<div className={classNames.contentHolder}>
		<span className={classNames.itemName}>
		{this.state.prefix} {item.name}
		</span>
		<input
		className={classNames.input}
		type="text"
		defaultValue="Change me, I retain this state!"
		/>
		</div>
		</li>
		);
		}.bind(this)).toArray()
		}
		</Reorder>

		React.createElement('p', null,
		'Reorder disabled: ',
		React.createElement('input', {
		type: 'checkbox',
		onChange: this.disableToggled,
		value: this.state.disableReorder \|\| false
		}),
		'Last item clicked: ',
		this.state.clickedItem2 ? this.state.clickedItem2.name : undefined
		),
		<h3>
		Lock vertical
		</h3>
		<p>
		This example has a hold time of 250 milliseconds
		</p>
		<p>
		{'Reorder disabled: '}
		<input
		type="checkbox"
		value={this.state.disableReorder \|\| false}
		onChange={this.onDisableToggle.bind(this)}
		/>
		Last item clicked: {this.state.clickedItem2 ? this.state.clickedItem2.name : undefined}
		</p>

		React.createElement(Reorder, {
		itemKey: 'name',
		lock: 'vertical',
		holdTime: '250',
		list: this.state.arr,
		template: ListItem,
		callback: this.callback,
		listClass: 'my-list-2',
		itemClass: 'list-item',
		itemClicked: this.itemClicked2,
		disableReorder: this.state.disableReorder}),
		<Reorder
		reorderId="myList2"
		component="ul"
		className={[classNames.myList, classNames.myList2].join(' ')}
		placeholderClassName={classNames.placeholder}
		draggedClassName={classNames.dragged}
		lock="vertical"
		holdTime={250}
		onReorder={this.onReorder.bind(this)}
		disabled={this.state.disableReorder}
		>
		{
		this.state.list.map(function (item) {
		return (
		<li
		key={item.name}
		className={[classNames.listItem, classNames.listItem2].join(' ')}
		style={{color: item.color}}
		>
		{item.name}
		</li>
		);
		}.bind(this)).toArray()
		}
		</Reorder>

		React.createElement('p', null, React.createElement('strong', null, 'No lock (grid)')),
		React.createElement('small', null, 'This example has a hold time of 0 milliseconds'),
		<h3>
		No lock (grid)
		</h3>
		<p>
		This example has a hold time of 0 milliseconds
		</p>

		React.createElement(Reorder, {
		itemKey: 'name',
		holdTime: '0',
		list: this.state.arr,
		template: ListItem,
		callback: this.callback,
		listClass: 'my-list-3',
		itemClass: 'list-item'})
		<Reorder
		reorderId="myList3"
		component="ul"
		className={[classNames.myList, classNames.myList3].join(' ')}
		placeholderClassName={classNames.placeholder}
		draggedClassName={classNames.dragged}
		onReorder={this.onReorder.bind(this)}
		>
		{
		this.state.list.map(function (item) {
		return (
		<li
		key={item.name}
		className={[classNames.listItem, classNames.listItem3].join(' ')}
		style={{color: item.color}}
		>
		{item.name}
		</li>
		);
		}.bind(this)).toArray()
		}
		</Reorder>

		<h3>
		Drag between lists
		</h3>
		<p>
		This example has a group of lists that you can drag items between
		</p>

		<Reorder
		reorderId="listA"
		reorderGroup="reorderGroup"
		component="ul"
		className={[classNames.myList, classNames.multiList].join(' ')}
		placeholderClassName={classNames.placeholder}
		draggedClassName={classNames.dragged}
		onReorder={this.onReorderGroup.bind(this)}
		>
		{
		this.state.listA.map(function (item) {
		return (
		<li
		key={item.name}
		className={[classNames.listItem, classNames.multiListItem].join(' ')}
		style={{color: item.color}}
		>
		<div className={classNames.contentHolder}>
		<span className={classNames.itemName}>
		{item.name}
		</span>
		<input
		className={classNames.input}
		type="text"
		defaultValue="Change me, I sort of retain this state!"
		/>
		</div>
		</li>
		);
		}.bind(this)).toArray()
		}
		</Reorder>

		<Reorder
		reorderId="listB"
		reorderGroup="reorderGroup"
		component="ul"
		className={[classNames.myList, classNames.multiList].join(' ')}
		placeholderClassName={classNames.placeholder}
		draggedClassName={classNames.dragged}
		onReorder={this.onReorderGroup.bind(this)}
		>
		{
		this.state.listB.map(function (item) {
		return (
		<li
		key={item.name}
		className={[classNames.listItem, classNames.multiListItem].join(' ')}
		style={{color: item.color}}
		>
		<div className={classNames.contentHolder}>
		<span className={classNames.itemName}>
		{item.name}
		</span>
		<input
		className={classNames.input}
		type="text"
		defaultValue="Change me, I sort of retain this state!"
		/>
		</div>
		</li>
		);
		}.bind(this)).toArray()
		}
		</Reorder>
		</div>
		);
		}
		});
		}

		ReactDOM.render(React.createElement(Main), document.getElementById('app'));

57

package.json

		{
		"name": "react-reorder",
		"version": "2.1.0",
		"version": "3.0.0-alpha.0",
		"description": "Drag & drop, touch enabled, reorderable / sortable list, React component",
		"author": "Jake 'Sid' Smith",
		"license": "MIT",
		"main": "index.js",
		"main": "src/index.js",
		"scripts": {
		"start": "http-server examples/ -c-1 -o",
		"build-less": "lessc examples/src/less/index.less examples/build/css/index.css && echo 'Less compiled'",
		"build-js": "browserify examples/src/js/index.js -o examples/build/js/index.js",
		"watch-js": "watchify examples/src/js/index.js -o examples/build/js/index.js -v",
		"build-dirs": "mkdir -p examples/build/css/ && mkdir -p examples/build/js/",
		"build": "npm run build-dirs && npm run build-less && npm run build-js",
		"watch": "npm run watch-js"
		"build-js": "browserify -t babelify examples/src/js/index.js -o examples/build/js/index.js",
		"watch-js": "watchify -t babelify examples/src/js/index.js -o examples/build/js/index.js -v",
		"build-dirs": "mkdir -p examples/build/js/",
		"build": "npm run build-dirs && npm run build-js",
		"watch": "npm run watch-js",
		"lint-src": "eslint -c .eslintrc-src.json src/",
		"lint-examples": "eslint -c .eslintrc-examples.json examples/src/js/",
		"lint-tests": "eslint -c .eslintrc-tests.json tests/",
		"mocha": "BABEL_ENV=mocha nyc mocha --opts .mocharc 'tests/*/.test.js'",
		"test": "npm run lint-src && npm run lint-examples && npm run lint-tests && npm run mocha"
		},
		@@ -33,11 +37,34 @@ "bugs": "https://github.com/JakeSidSmith/react-reorder/issues",
		],
		"dependencies": {},
		"dependencies": {
		"lodash.assign": "*"
		},
		"devDependencies": {
		"browserify": "=12.0.1",
		"http-server": "=0.8.5",
		"less": "=2.5.3",
		"react": ">=0.14.7",
		"react-dom": ">=0.14.7",
		"watchify": "=3.6.1"
		"babel-preset-es2015": "6.18.0",
		"babel-preset-react": "6.11.1",
		"babelify": "7.3.0",
		"browserify": "12.0.1",
		"chai": "3.5.0",
		"eslintrc": "git+https://github.com/JakeSidSmith/eslintrc.git#v2.1.0",
		"http-server": "0.8.5",
		"immutable": "3.8.1",
		"jquery": "3.1.1",
		"jsdom": "9.8.3",
		"lodash.assign": "4.2.0",
		"mocha": "3.2.0",
		"nyc": "10.0.0",
		"react": "15.4.1",
		"react-addons-test-utils": "15.4.1",
		"react-dom": "15.4.1",
		"react-style-sheets": "0.1.0",
		"sinon": "1.17.6",
		"sinon-chai": "2.8.0",
		"watchify": "3.6.1"
		},
		"peerDependencies": {
		"react": "*"
		},
		"engines": {
		"node": "6.9.1",
		"npm": "3.10.8"
		}
		}

246

README.md

		@@ -1,2 +0,2 @@
		# React Reorder
		# React Reorder [![CircleCI](https://circleci.com/gh/JakeSidSmith/react-reorder.svg?style=svg)](https://circleci.com/gh/JakeSidSmith/react-reorder)

		@@ -7,181 +7,123 @@ __Drag & drop, touch enabled, reorder / sortable list, React component__

		React Reorder is a React component that allows the user to drag-and-drop items in a list (horizontal / vertical) or a grid.
		React Reorder is a React component that allows the user to drag-and-drop items in a list (horizontal / vertical), or a grid. You can also allow dragging items from one list to another.

		It fully supports touch devices and auto-scrolls when a component is being dragged (check out the demo, link below).
		It fully supports touch devices and auto-scrolls when a component is being dragged (check out the [demo](http://jakesidsmith.github.io/react-reorder/)).

		It also allows the user to set a hold time (duration before drag begins) allowing additional events like clicking / tapping to be applied.

		Although this project is very new, it has been thoroughly tested in all modern browsers (see supported browsers).

		__[Demo](http://jakesidsmith.github.io/react-reorder/)__

		## Installation

		* Using npm
		```
		npm install react-reorder
		```
		Add `--save` or `-S` to update your package.json
		Using npm

		* Using bower
		```
		bower install react-reorder
		```
		Add `--save` or `-S` to update your bower.json
		Add `--save` or `-S` to update your package.json

		## Example
		```
		npm install react-reorder
		```

		1. If using requirejs: add `react-reorder` to your `require.config`
		Using bower

		```javascript
		paths:
		// <name> : <path/to/module>
		'react-reorder': 'react-reorder/reorder'
		}
		```
		Add `--save` or `-S` to update your bower.json

		2. If using a module loader (requirejs / browserfiy / commonjs): require `react-reorder` where it will be used in your project
		```
		bower install react-reorder
		```

		```javascript
		var Reorder = require('react-reorder');
		```
		## Example

		If using requirejs you'll probably want to wrap your module e.g.
		If using a module loader (requirejs / browserfiy / commonjs): require `react-reorder` where it will be used in your project

		```javascript
		define(function (require) {
		// Require react-reorder here
		});
		```
		```javascript
		var Reorder = require('react-reorder');
		var reorder = Reorder.reorder;
		var reorderImmutable = Reorder.reorderImmutable;
		var reorderFromTo = Reorder.reorderFromTo;
		var reorderFromToImmutable = Reorder.reorderFromToImmutable;

		3. Configuration
		// Or ES6

		Note: If your array is an array of primitives (e.g. strings) then `itemKey` is not required as the string itself will be used as the key, however item keys must be unique in any case
		import Reorder, {
		reorder,
		reorderImmutable,
		reorderFromTo,
		reorderFromToImmutable
		} from 'react-reorder';
		```

		1. Using JSX
		### Configuration

		```javascript
		<Reorder
		// The key of each object in your list to use as the element key
		itemKey='name'
		// Lock horizontal to have a vertical list
		lock='horizontal'
		// The milliseconds to hold an item for before dragging begins
		holdTime='500'
		// The list to display
		list={[
		{name: 'Item 1'},
		{name: 'Item 2'},
		{name: 'Item 3'}
		]}
		// A template to display for each list item
		template={ListItem}
		// Function that is called once a reorder has been performed
		callback={this.callback}
		// Class to be applied to the outer list element
		listClass='my-list'
		// Class to be applied to each list item's wrapper element
		itemClass='list-item'
		// A function to be called if a list item is clicked (before hold time is up)
		itemClicked={this.itemClicked}
		// The item to be selected (adds 'selected' class)
		selected={this.state.selected}
		// The key to compare from the selected item object with each item object
		selectedKey='uuid'
		// Allows reordering to be disabled
		disableReorder={false}/>
		```
		```javascript
		<Reorder
		reorderId="my-list" // Unique ID that is used internally to track this list (required)
		reorderGroup="reorder-group" // A group ID that allows items to be dragged between lists of the same group (optional)
		getRef={this.storeRef.bind(this)} // Function that is passed a reference to the root node when mounted (optional)
		component="ul" // Tag name or Component to be used for the wrapping element (optional), defaults to 'div'
		placeholderClassName="placeholder" // Class name to be applied to placeholder elements (optional), defaults to 'placeholder'
		draggedClassName="dragged" // Class name to be applied to dragged elements (optional), defaults to 'dragged'
		lock="horizontal" // Lock the dragging direction (optional): vertical, horizontal (do not use with groups)
		holdTime={500} // Default hold time before dragging begins (mouse & touch) (optional), defaults to 0
		touchHoldTime={500} // Hold time before dragging begins on touch devices (optional), defaults to holdTime
		mouseHoldTime={200} // Hold time before dragging begins with mouse (optional), defaults to holdTime
		onReorder={this.onReorder.bind(this)} // Callback when an item is dropped (you will need this to update your state)
		autoScroll={true} // Enable auto-scrolling when the pointer is close to the edge of the Reorder component (optional), defaults to true
		disabled={false} // Disable reordering (optional), defaults to false
		disableContextMenus={true} // Disable context menus when holding on touch devices (optional), defaults to true
		placeholder={
		<div className="custom-placeholder" /> // Custom placeholder element (optional), defaults to clone of dragged element
		}
		>
		{
		this.state.list.map((item) => (
		<li key={item.name}>
		{item.name}
		</li>
		)).toArray()
		/*
		Note this example is an ImmutableJS List so we must convert it to an array.
		I've left this up to you to covert to an array, as react-reorder updates a lot,
		and if I called this internally it could get rather slow,
		whereas you have greater control over your component updates.
		*/
		}
		</Reorder>
		```

		2. Using standard Javascript
		### Callback functions

		```javascript
		React.createElement(Reorder, {
		// The key of each object in your list to use as the element key
		itemKey: 'name',
		// Lock horizontal to have a vertical list
		lock: 'horizontal',
		// The milliseconds to hold an item for before dragging begins
		holdTime: '500',
		// The list to display
		list: [
		{name: 'Item 1'},
		{name: 'Item 2'},
		{name: 'Item 3'}
		],
		// A template to display for each list item
		template: ListItem,
		// Function that is called once a reorder has been performed
		callback: this.callback,
		// Class to be applied to the outer list element
		listClass: 'my-list',
		// Class to be applied to each list item's wrapper element
		itemClass: 'list-item',
		// A function to be called if a list item is clicked (before hold time is up)
		itemClicked: this.itemClicked,
		// The item to be selected (adds 'selected' class)
		selected: this.state.selected,
		// The key to compare from the selected item object with each item object
		selectedKey: 'uuid',
		// Allows reordering to be disabled
		disableReorder: false
		})
		```
		The `onReorder` function that is called once a reorder has been performed.

		5. Callback functions
		You can use our helper functions for reordering your arrays.

		1. The `callback` function that is called once a reorder has been performed
		```javascript
		import { reorder, reorderImmutable, reorderFromTo, reorderFromToImmutable } from 'react-reorder';

		```javascript
		function callback(event, itemThatHasBeenMoved, itemsPreviousIndex, itemsNewIndex, reorderedArray) {
		// ...
		}
		```
		onReorder (event, previousIndex, nextIndex, fromId, toId) {
		this.setState({
		myList: reorder(this.state.myList, fromIndex, toIndex);
		});
		}

		2. The `itemClicked` function that is called when an item is clicked before any dragging begins
		onReorderGroup (event, previousIndex, nextIndex, fromId, toId) {
		if (fromId === toId) {
		const list = reorderImmutable(this.state[fromId], previousIndex, nextIndex);

		```javascript
		function itemClicked(event, itemThatHasBeenClicked, itemsIndex) {
		// ...
		}
		```
		this.setState({
		[fromId]: list
		});
		} else {
		const lists = reorderFromToImmutable({
		from: this.state[fromId],
		to: this.state[toId]
		}, previousIndex, nextIndex);

		Note: `event` will be the synthetic React event for either `mouseup` or `touchend`, and both contain `clientX` & `clientY` values (for ease of use)
		this.setState({
		[fromId]: lists.from,
		[toId]: lists.to
		});
		}
		}
		```

		## Compatibility / Requirements

		* Version `2.x` tested and working with React `0.14`

		* Versions `1.x` tested and working with React `0.12` - `0.13`

		* requirejs / commonjs / browserify (__Optional, but recommended*__)

		\* Has only been tested with requirejs & browserify

		## Supported Browsers

		### Desktop

		* Internet Explorer 9+ (may support IE8**)

		* Google Chrome (tested in version 39.0.2171.95(64-bit))

		* Mozilla Firefox (tested in version 33.0)

		* Opera (tested in version 26.0.1656.60)

		* Safari (tested in version 7.1.2 (9537.85.11.5))

		\** Have not had a chance to test in IE8, but IE8 is supported by React


		### Mobile

		* Chrome (tested in version 40.0.2214.89)

		* Safari (tested on iOS 8)

		## Untested Browsers

		* Internet Explorer 8*** (the lowest version that React supports)

		\*** If anyone could confirm that this works in IE8, that'd be awesome
		* Version `3.x` tested and working with React `15`, but should be backward compatible at least a couple of versions.

examples/src/less/index.less

index.js

.npmignore

Sorry, the diff of this file is not supported yet

examples/index.html

Sorry, the diff of this file is not supported yet

react-reorder - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes