#217: + react examples

README.md

@@ -285,7 +285,7 @@ angular.module('myApp', ['ng-sortable'])
 <a name="react"></a>
 ### Support React
 Include [react-sortable-mixin.js](react-sortable-mixin.js).
-See more [here](react-sortable-mixin.js#L37).
+See [more options](react-sortable-mixin.js#L26).
 
 
 ```jsx
@@ -298,6 +298,8 @@ var SortableList = React.createClass({
 		};
 	},
 
+	onSort: function (/** Event */evt) { /*..*/ },
+
 	render: function() {
 		return <ul>{
 			this.state.items.map(function (text) {
@@ -308,6 +310,58 @@ var SortableList = React.createClass({
 });
 
 React.render(<SortableList />, document.body);
+
+
+//
+// Groups
+//
+var AllUsers = React.createClass({
+	mixins: [SortableMixin],
+
+	sortableOptions: {
+		ref: "user",
+		group: "shared",
+		model: "users"
+	},
+
+	getInitialState: function() {
+		return { users: ['Abbi', 'Adela', 'Bud', 'Cate', 'Davis', 'Eric']; };
+	},
+
+	render: function() {
+		return (
+			<h1>Users</h1>
+			<ul ref="users">{
+				this.state.users.map(function (text) {
+					return <li>{text}</li>
+				})
+			}</ul>
+		);
+	}
+});
+
+var ApprovedUsers = React.createClass({
+	mixins: [SortableMixin],
+	sortableOptions: { group: "shared" },
+
+	getInitialState: function() {
+		return { items: ['Hal', 'Judy']; };
+	},
+
+	render: function() {
+		return <ul>{
+			this.state.items.map(function (text) {
+				return <li>{text}</li>
+			})
+		}</ul>
+	}
+});
+
+React.render(<div>
+	<AllUsers/>
+	<hr/>
+	<ApprovedUsers/>
+</div>, document.body);
 ```
 
 

react-sortable-mixin.js

@@ -23,7 +23,6 @@
 
 	var _activeComponent;
 
-
 	var _defaultOptions = {
 		ref: 'list',
 		model: 'items',