@omakase-ui/react-sortable-list 👋

> You should focus the `features` of your app, not DnD boilerplate. ### 🏠 [Homepage](https://github.com/ThaddeusJiang/react-sortable-list#readme) ### ✨ [Demo](https://main--6255853aaf9d91003a12d67f.chromatic.com/) ## Features - [x] Easy Drag & Drop sort items - [x] Both [Render Props](https://reactjs.org/docs/render-props.html) and [Children](https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx) - [x] Custom Drag Handler - [x] Horizontal Sortable List ## Install ```sh yarn add @omakase-ui/react-sortable-list ``` ## Usage ### Use Case 1: ItemRender ```jsx export const ItemRenderExample: React.VFC = () => { const [items, setItems] = useState([ { id: '1', name: 'Item 1' }, { id: '2', name: 'Item 2' }, { id: '3', name: 'Item 3' }, ]); return ( (

{item.name}

)} /> ); }; ``` ### Use Case 2: Children ```jsx export const ChildrenExample: React.VFC = () => { const [items, setItems] = useState([ { id: '1', name: 'Item 1' }, { id: '2', name: 'Item 2' }, ]); return ( {({ items }: { items: SortableItemProps[] }) => ( <> {items.map((item: SortableItemProps) => ( {item.name} ))} )} ); }; ``` ### Use Case 3: Custom Drag Handler

```jsx const DragHandler = (props) => (

); export const DragHandleExample: React.VFC = () => { const [items, setItems] = useState([ { id: '1', name: 'Item 1' }, { id: '2', name: 'Item 2' }, { id: '3', name: 'Item 3' }, ]); return ( {({ items }: { items: SortableItemProps[] }) => (

{items.map((item: SortableItemProps) => (

{item.name}

))}

)} ); }; ```

### Use Case 4: Horizontal Sortable List

```jsx export const HorizontalExample: React.VFC = () => { const [items, setItems] = useState([ { id: '1', name: 'Item 1' }, { id: '2', name: 'Item 2' }, { id: '3', name: 'Item 3' }, ]); return (

} horizontal />

); }; ```

## Development ### Storybook Run inside another terminal: ```bash yarn storybook ``` ### Example Then run the example inside another: ```bash yarn link cd example yarn link "@omakase-ui/react-sortable-list" yarn # or yarn to install dependencies yarn start ``` ### Run tests ```sh yarn run test ``` ## Author 👤 **Thaddeus Jiang** * Website: https://thaddeusjiang.com/ * Twitter: [@ThaddeusJiang](https://twitter.com/ThaddeusJiang) * Github: [@ThaddeusJiang](https://github.com/ThaddeusJiang) ## Show your support Give a ⭐️ if this project helped you! ## 📝 License Copyright © 2022 [Thaddeus Jiang](https://github.com/ThaddeusJiang).
This project is [MIT](https://github.com/ThaddeusJiang/react-sortable-list/blob/main/LICENSE) licensed. *** _This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_