@@ -10,7 +10,7 @@ Please note that this is not considered ready for production, as there are still
10
10
11
11
## Installation
12
12
13
- ` sortablejs ` and ` @types/sortablejs ` are peer dependencies. The latter only used if intellisense/typescript is desired.
13
+ ` sortablejs ` and ` @types/sortablejs ` are peer dependencies. The latter is only used if intellisense/typescript is desired.
14
14
15
15
``` shell
16
16
npm install --save react-sortablejs sortablejs
@@ -27,7 +27,7 @@ Here is the TLDR of what sortable is:
27
27
28
28
``` md
29
29
- Shopping List: # list of items / sortable. This represents `react-sortablejs`
30
- - eggs # list item. These are all the items in the list and is what you move around.
30
+ - eggs # list item. These are all the items in the list and are what you move around.
31
31
- bread # list item
32
32
- milk # list item
33
33
```
@@ -144,7 +144,7 @@ Sortable.create(element, {
144
144
});
145
145
146
146
// --------------------------
147
- // Will now be..
147
+ // Will now be...
148
148
// --------------------------
149
149
150
150
import React from " react" ;
@@ -176,7 +176,7 @@ const App = () => {
176
176
177
177
### id, className, style
178
178
179
- These are all defaults DOM attributes. Nothing special here.
179
+ These are all default DOM attributes. Nothing special here.
180
180
181
181
### list
182
182
@@ -202,7 +202,7 @@ The same as `setState` in `const [ state, setState] = useState([{ id: 1}, {id: 2
202
202
203
203
### clone
204
204
205
- If you're using ` {group: { name: 'groupName', pull: 'clone'}} ` , this means your in 'clone' mode. You should provide a function for this.
205
+ If you're using ` {group: { name: 'groupName', pull: 'clone'}} ` , this means you're in 'clone' mode. You should provide a function for this.
206
206
207
207
Check out the source code of the clone example for more information. I'll write it here soon.
208
208
@@ -211,13 +211,13 @@ Check out the source code of the clone example for more information. I'll write
211
211
ReactSortable is a ` div ` element by default. This can be changed to be any HTML element (for example ` ul ` , ` ol ` )
212
212
or can be a React component.
213
213
214
- This value, be the component or the HTML element should be passed down under ` props.tag ` .
214
+ This value, be it the component or the HTML element, should be passed down under ` props.tag ` .
215
215
216
216
Let's explore both here.
217
217
218
218
#### HTML Element
219
219
220
- Here we will use a ` ul ` . You can use any HTML.
220
+ Here we will use an ` ul ` . You can use any HTML.
221
221
Just add the string and ReactSortable will use a ` ul ` instead of a ` div ` .
222
222
223
223
``` tsx
@@ -240,12 +240,12 @@ export const BasicFunction: FC = (props) => {
240
240
#### Custom Component
241
241
242
242
When using a custom component in the ` tag ` prop, the only component it allows is a ` forwardRef ` component.
243
- Currently we only support components who use the ` React.forwardRef ` API.
243
+ Currently, we only support components that use the ` React.forwardRef ` API.
244
244
245
245
If it doesn't have one, you can add one using ` React.forwardRef() ` .
246
246
247
- > todo: Some third party UI components may have nested elements to create the look they're after.
248
- > This could be an issue and not sure how to fix.
247
+ > todo: Some third- party UI components may have nested elements to create the look they're after.
248
+ > This could be an issue and not sure how to fix it .
249
249
250
250
``` tsx
251
251
import React , { FC , useState , forwardRef } from " react" ;
@@ -275,7 +275,7 @@ export const BasicFunction: FC = (props) => {
275
275
## How does it work?
276
276
277
277
Sortable affects the DOM, adding, and removing nodes/css when it needs to in order to achieve the smooth transitions we all know an love.
278
- This component reverses many of it's actions of the DOM so React can handle this when the state changes.
278
+ This component reverses many of its actions of the DOM so React can handle this when the state changes.
279
279
280
280
## Caveats / Gotchas
281
281
@@ -291,7 +291,7 @@ I may even enforce this into the design to eliminate errors.
291
291
292
292
#### Problem
293
293
294
- Basically the child updates the state twice. I'm working on this.
294
+ Basically, the child updates the state twice. I'm working on this.
295
295
296
296
#### What does work?
297
297
@@ -301,7 +301,7 @@ I hope to provide an example soon.
301
301
302
302
#### Solutions
303
303
304
- We don't have anything that works 100%, but here I'd like to spit ball some potential avenues to look down.
304
+ We don't have anything that works 100%, but here I'd like to spitball some potential avenues to look down.
305
305
306
306
- Use ` onMove ` to handle state changes instead of ` onAdd ` ,` onRemove ` , etc.
307
307
- Create a Sortable plugin specifically for react-sortbalejs
0 commit comments