my-react-sortable/README.md

my-react-sortable module helps you create React sortable lists easily. Where you can re-arrange the list items.

# my-react-sortable
> **`my-react-sortable` module helps you create React sortable lists easily. Where you can re-arrange the list items.**
### There are 2 components in the module `SortableList` and `SortableCard`
### Import and Usage - 
```javascript
import { SortableList, SortableCard } from 'my-react-sortable'
// ...
  const [ list, setList ] = useState(initialList)
// ...
  <SortableList
    list={list}
    setList={setList}
  >
   {list.map(listItem => (
      <SortableCard
        key={listItem.id}
      >
        {/* Card content */}
      </SortableCard>
    ))}
  </SortableList>
  ```
### List of props for `SortableList` -
- `list` - the react state where you are storing the list* **(required)** `(Array)`
- `setList` - the function to set the list state* **(required)** `(Function)`
- `horizontalList` - if the list is being displayed horizontally(e.g.`display: flex;`). Then you should also pass this prop. `(Boolean)` 
- `customStyle` - this prop can be used to apply your own custom styles on the SortableList component. Just write the css styles in a string variable like `const myStyle = "background-color: #aeaeae; border-radius: 0.5rem;"`, and pass that as optional customStyle prop (style will be applied using styled-components) `(String)`

**NOTE - If you are using class based component, you can make a setList function like this to pass as setList prop -**
```javascript
  setList = (newList) => {
    if (typeof newList === 'function') {
      this.setState(prevState => ({ list: newList(prevState.list) }))
    } else {
      this.setState({ list: newList })
    }
  }
```

### List of props for `SortableCard` -
- `customStyle` - Same usage as SortableList, can be used to define your own styles on SortableCard component `(String)`

### Modules used - 
- `react`
- `styled-components`