8000 Fix typos and grammatical errors in README · avirl108/react-sortablejs@b5bf2cb · GitHub
[go: up one dir, main page]

Skip to content

Commit b5bf2cb

Browse files
authored
Fix typos and grammatical errors in README
1 parent 48e8780 commit b5bf2cb

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

README.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Please note that this is not considered ready for production, as there are still
1010

1111
## Installation
1212

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.
1414

1515
```shell
1616
npm install --save react-sortablejs sortablejs
@@ -27,7 +27,7 @@ Here is the TLDR of what sortable is:
2727

2828
```md
2929
- 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.
3131
- bread # list item
3232
- milk # list item
3333
```
@@ -144,7 +144,7 @@ Sortable.create(element, {
144144
});
145145

146146
// --------------------------
147-
// Will now be..
147+
// Will now be...
148148
// --------------------------
149149

150150
import React from "react";
@@ -176,7 +176,7 @@ const App = () => {
176176

177177
### id, className, style
178178

179-
These are all defaults DOM attributes. Nothing special here.
179+
These are all default DOM attributes. Nothing special here.
180180

181181
### list
182182

@@ -202,7 +202,7 @@ The same as `setState` in `const [ state, setState] = useState([{ id: 1}, {id: 2
202202

203203
### clone
204204

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.
206206

207207
Check out the source code of the clone example for more information. I'll write it here soon.
208208

@@ -211,13 +211,13 @@ Check out the source code of the clone example for more information. I'll write
211211
ReactSortable is a `div` element by default. This can be changed to be any HTML element (for example `ul`, `ol`)
212212
or can be a React component.
213213

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`.
215215

216216
Let's explore both here.
217217

218218
#### HTML Element
219219

220-
Here we will use a `ul`. You can use any HTML.
220+
Here we will use an `ul`. You can use any HTML.
221221
Just add the string and ReactSortable will use a `ul` instead of a `div`.
222222

223223
```tsx
@@ -240,12 +240,12 @@ export const BasicFunction: FC = (props) => {
240240
#### Custom Component
241241

242242
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.
244244

245245
If it doesn't have one, you can add one using `React.forwardRef()`.
246246

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.
249249
250250
```tsx
251251
import React, { FC, useState, forwardRef } from "react";
@@ -275,7 +275,7 @@ export const BasicFunction: FC = (props) => {
275275
## How does it work?
276276

277277
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.
279279

280280
## Caveats / Gotchas
281281

@@ -291,7 +291,7 @@ I may even enforce this into the design to eliminate errors.
291291

292292
#### Problem
293293

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.
295295

296296
#### What does work?
297297

@@ -301,7 +301,7 @@ I hope to provide an example soon.
301301

302302
#### Solutions
303303

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.
305305

306306
- Use `onMove` to handle state changes instead of `onAdd`,`onRemove`, etc.
307307
- Create a Sortable plugin specifically for react-sortbalejs

0 commit comments

Comments
 (0)
0