Skip to content

Commit 2f5b87c

Browse files
committed
Update Usage and Examples
1 parent f17a492 commit 2f5b87c

File tree

1 file changed

+86
-49
lines changed

1 file changed

+86
-49
lines changed

README.md

Lines changed: 86 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -70,16 +70,17 @@ See more options at https://github.com/RubaXa/Sortable#options
7070

7171
```js
7272
import React from 'react';
73-
import SortableMixin from 'react-sortablejs';
73+
import Sortable from 'react-sortablejs';
7474

75-
const sortableOptions = {
76-
ref: 'list',
77-
model: 'items'
78-
};
79-
80-
class MySortableComponent extends React.Component {
75+
class MySortableList extends React.Component {
76+
static propTypes = {
77+
items: React.PropTypes.array
78+
};
79+
static defaultProps = {
80+
items: []
81+
};
8182
state = {
82-
items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
83+
items: this.props.items
8384
};
8485

8586
handleStart(evt) { // Dragging started
@@ -99,61 +100,61 @@ class MySortableComponent extends React.Component {
99100
handleMove(evt) { // Event when you move an item in the list or between lists
100101
}
101102
render() {
102-
const items = this.state.items.map((text, index) => (
103-
<li key={index}>{text}</li>
104-
));
105-
106103
return (
107-
<div>
108-
<ul ref="list">{items}</ul>
109-
</div>
104+
<ul ref="list">{items}</ul>
110105
);
111106
}
112107
}
113108

114-
export default SortableMixin(sortableOptions)(MySortableComponent);
109+
const sortableOptions = {
110+
ref: 'list',
111+
model: 'items'
112+
};
113+
export default Sortable(sortableOptions)(MySortableList);
115114
```
116115

117116
## Examples
118117

119-
Using the `group` option to drag elements from one list into another.
118+
### Simple List
120119

121120
File: index.jsx
122121
```js
123122
import React from 'react';
124123
import ReactDOM from 'react-dom';
125-
import Sortable1 from './sortable1';
126-
import Sortable2 from './sortable2';
127-
128-
const SortableList = (props) => {
129-
return (
130-
<div>
131-
<Sortable1 />
132-
<hr />
133-
<Sortable2 />
134-
</div>
135-
);
136-
};
124+
import SimpleList from './simple-list';
137125

138-
ReactDOM.render(<SortableList />, document.body);
126+
ReactDOM.render(
127+
<SimpleList items={[1, 2, 3, 4, 5, 6]} />,
128+
document.getElementById('container')
129+
);
139130
```
140131

141-
File: sortable1.jsx
142-
132+
File: simple-list.jsx
143133
```js
144134
import React from 'react';
145-
import SortableMixin from 'react-sortablejs';
135+
import Sortable from 'react-sortablejs';
136+
137+
const sortableOptions = {
138+
ref: 'list',
139+
model: 'items'
140+
};
146141

147-
class Sortable1 extends React.Component {
142+
class SimpleList extends React.Component {
143+
static propTypes = {
144+
items: React.PropTypes.array
145+
};
146+
static defaultProps = {
147+
items: []
148+
};
148149
state = {
149-
items: [0, 1, 2, 3, 4]
150+
items: this.props.items
150151
};
151-
152+
152153
render() {
153-
let items = this.state.items.map((text, index) => {
154-
return <li key={index}>{text}</li>;
155-
});
156-
154+
const items = this.state.items.map((val, index) => (
155+
<li key={index}>{val}</li>
156+
));
157+
157158
return (
158159
<div>
159160
<ul ref="list">{items}</ul>
@@ -162,24 +163,60 @@ class Sortable1 extends React.Component {
162163
}
163164
}
164165

165-
export default SortableMixin({ group: 'shared' })(Sortable1);
166+
export default Sortable(sortableOptions)(SimpleList);
166167
```
167168

168-
File: sortable2.jsx
169+
### Shared Group
170+
Using the `group` option to drag elements from one list into another.
171+
172+
File: index.jsx
173+
```js
174+
import React from 'react';
175+
import ReactDOM from 'react-dom';
176+
import SharedGroup from './shared-group';
177+
178+
const SortableList = (props) => {
179+
return (
180+
<div>
181+
<SharedGroup
182+
items={['Apple', 'Banaba', 'Cherry', 'Grape']}
183+
/>
184+
<SharedGroup
185+
items={['Lemon', 'Orange', 'Pear', 'Peach']}
186+
/>
187+
</div>
188+
);
189+
};
190+
191+
ReactDOM.render(<SortableList />, document.getElementById('container'));
192+
```
169193

194+
File: shared-group.jsx
170195
```js
171196
import React from 'react';
172-
import SortableMixin from 'react-sortablejs';
197+
import Sortable from 'react-sortablejs';
198+
199+
const sortableOptions = {
200+
ref: 'list',
201+
model: 'items',
202+
group: 'shared'
203+
};
173204

174-
class Sortable2 extends React.Component {
205+
class SharedGroup extends React.Component {
206+
static propTypes = {
207+
items: React.PropTypes.array
208+
};
209+
static defaultProps = {
210+
items: []
211+
};
175212
state = {
176-
items: [5, 6, 7, 8, 9]
213+
items: this.props.items
177214
};
178215

179216
render() {
180-
let items = this.state.items.map((text, index) => {
181-
return <li key={index}>{text}</li>;
182-
});
217+
const items = this.state.items.map((text, index) => (
218+
<li key={index}>{text}</li>
219+
));
183220

184221
return (
185222
<div>
@@ -189,5 +226,5 @@ class Sortable2 extends React.Component {
189226
}
190227
}
191228

192-
export default SortableMixin({ group: 'shared' })(Sortable2);
229+
export default Sortable(sortableOptions)(SharedGroup);
193230
```

0 commit comments

Comments
 (0)