Skip to content

Commit 7226806

Browse files
committed
Update README.md
1 parent b7fa131 commit 7226806

File tree

1 file changed

+11
-11
lines changed

1 file changed

+11
-11
lines changed

README.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ Then, include these scripts into your html file:
4343
```
4444

4545
## Usage
46-
File: sortable-list.jsx
4746
```jsx
4847
import React from 'react';
4948
import Sortable from 'react-sortablejs';
@@ -65,18 +64,18 @@ const SortableList = ({ items, onChange }) => {
6564
options={{
6665
}}
6766

68-
// Use ref to get the sortable instance
67+
// [Optional] Use ref to get the sortable instance
6968
// https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute
7069
ref={(c) => {
7170
if (c) {
7271
sortable = c.sortable;
7372
}
7473
}}
7574

76-
// An optional tag to specify the wrapping element. Defaults to "div".
75+
// [Optional] A tag to specify the wrapping element. Defaults to "div".
7776
tag="ul"
7877

79-
// The optional onChange method allows you to implement a controlled component and keep
78+
// [Optional] The onChange method allows you to implement a controlled component and keep
8079
// DOM nodes untouched. You have to change state to re-render the children.
8180
onChange={(order) => {
8281
onChange(order);
@@ -128,7 +127,7 @@ ReactDOM.render(
128127

129128
## Examples
130129

131-
### Uncontrolled Component
130+
### 1. Uncontrolled Component
132131
```js
133132
import React from 'react';
134133
import ReactDOM from 'react-dom';
@@ -163,7 +162,7 @@ ReactDOM.render(
163162
);
164163
```
165164

166-
### Controlled Component
165+
### 2. Controlled Component
167166

168167
```js
169168
import React from 'react';
@@ -202,7 +201,7 @@ ReactDOM.render(
202201
);
203202
```
204203

205-
### Shared Group
204+
### 3. Shared Group
206205
Using the `group` option to drag elements from one list into another.
207206

208207
File: index.jsx
@@ -211,29 +210,30 @@ import React from 'react';
211210
import ReactDOM from 'react-dom';
212211
import SharedGroup from './shared-group';
213212

214-
const SortableList = (props) => {
213+
const App = (props) => {
215214
return (
216215
<div>
217216
<SharedGroup
218217
items={['Apple', 'Banaba', 'Cherry', 'Grape']}
219218
/>
219+
<br/>
220220
<SharedGroup
221221
items={['Lemon', 'Orange', 'Pear', 'Peach']}
222222
/>
223223
</div>
224224
);
225225
};
226226

227-
ReactDOM.render(<SortableList />, document.getElementById('container'));
227+
ReactDOM.render(<App />, document.getElementById('container'));
228228
```
229229

230230
File: shared-group.jsx
231231
```js
232232
import React from 'react';
233-
import Sortable from 'react-sortablejs';
233+
import Sortable from '../src';
234234

235235
const SharedGroup = ({ items }) => {
236-
item = items.map(item => <li>{item}</li>);
236+
items = items.map((val, key) => (<li key={key} data-id={val}>{val}</li>));
237237

238238
return (
239239
<Sortable

0 commit comments

Comments
 (0)