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 -

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 -

  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