Gathering detailed insights and metrics for @omakase-ui/react-sortable-list
Gathering detailed insights and metrics for @omakase-ui/react-sortable-list
Gathering detailed insights and metrics for @omakase-ui/react-sortable-list
Gathering detailed insights and metrics for @omakase-ui/react-sortable-list
refined UI components using daisyUI and Conform
npm install @omakase-ui/react-sortable-list
Typescript
Module System
Node Version
NPM Version
64.4
Supply Chain
93.2
Quality
75.2
Maintenance
100
Vulnerability
100
License
TypeScript (94.35%)
JavaScript (5.4%)
CSS (0.25%)
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
1,692
Last Day
1
Last Week
2
Last Month
13
Last Year
290
MIT License
8 Stars
5 Commits
1 Forks
2 Watchers
1 Branches
2 Contributors
Updated on Jan 20, 2025
Minified
Minified + Gzipped
Latest Version
0.0.1
Package Id
@omakase-ui/react-sortable-list@0.0.1
Unpacked Size
36.77 kB
Size
8.35 kB
File Count
16
NPM Version
8.19.1
Node Version
14.19.1
Cumulative downloads
Total Downloads
Last Day
0%
1
Compared to previous day
Last Week
-66.7%
2
Compared to previous week
Last Month
-7.1%
13
Compared to previous month
Last Year
-66.7%
290
Compared to previous year
2
1
28
You should focus the
features
of your app, not DnD boilerplate.
1yarn add @omakase-ui/react-sortable-list
1export const ItemRenderExample: React.VFC = () => { 2 const [items, setItems] = useState<SortableItemProps[]>([ 3 { id: '1', name: 'Item 1' }, 4 { id: '2', name: 'Item 2' }, 5 { id: '3', name: 'Item 3' }, 6 ]); 7 return ( 8 <SortableList 9 items={items} 10 setItems={setItems} 11 itemRender={({ item }: ItemRenderProps) => ( 12 <div className="w-1/2 h-10 m-8 bg-blue-400 text-center"> 13 {item.name} 14 </div> 15 )} 16 /> 17 ); 18};
1export const ChildrenExample: React.VFC = () => { 2 const [items, setItems] = useState<SortableItemProps[]>([ 3 { id: '1', name: 'Item 1' }, 4 { id: '2', name: 'Item 2' }, 5 ]); 6 7 return ( 8 <SortableList items={items} setItems={setItems}> 9 {({ items }: { items: SortableItemProps[] }) => ( 10 <> 11 {items.map((item: SortableItemProps) => ( 12 <SortableItem key={item.id} id={item.id}> 13 {item.name} 14 </SortableItem> 15 ))} 16 </> 17 )} 18 </SortableList> 19 ); 20};
1 2const DragHandler = (props) => ( 3 <div 4 {...props} 5 className=" flex justify-center items-center h-8 w-8 rounded border m-4 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-blue-500 hover:text-white duration-300" 6 > 7 <div className="" title="drag handler"> 8 <svg 9 xmlns="http://www.w3.org/2000/svg" 10 fill="none" 11 viewBox="0 0 24 24" 12 strokeWidth={1.5} 13 stroke="currentColor" 14 className="w-6 h-6" 15 > 16 <path 17 strokeLinecap="round" 18 strokeLinejoin="round" 19 d="M3 7.5L7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5" 20 /> 21 </svg> 22 </div> 23 </div> 24); 25 26export const DragHandleExample: React.VFC = () => { 27 const [items, setItems] = useState<SortableItemProps[]>([ 28 { id: '1', name: 'Item 1' }, 29 { id: '2', name: 'Item 2' }, 30 { id: '3', name: 'Item 3' }, 31 ]); 32 33 return ( 34 <SortableList items={items} setItems={setItems}> 35 {({ items }: { items: SortableItemProps[] }) => ( 36 <div className="space-y-4"> 37 {items.map((item: SortableItemProps) => ( 38 <SortableItem 39 key={item.id} 40 id={item.id} 41 DragHandler={DragHandler} 42 className="flex border items-center w-40" 43 > 44 <div>{item.name}</div> 45 </SortableItem> 46 ))} 47 </div> 48 )} 49 </SortableList> 50 ); 51}; 52
1export const HorizontalExample: React.VFC = () => { 2 const [items, setItems] = useState<SortableItemProps[]>([ 3 { id: '1', name: 'Item 1' }, 4 { id: '2', name: 'Item 2' }, 5 { id: '3', name: 'Item 3' }, 6 ]); 7 return ( 8 <div className="flex space-x-4"> 9 <SortableList 10 items={items} 11 setItems={setItems} 12 itemRender={({ item }: ItemRenderProps) => <Item name={item.name} />} 13 horizontal 14 /> 15 </div> 16 ); 17}; 18
Run inside another terminal:
1yarn storybook
Then run the example inside another:
1yarn link 2 3cd example 4yarn link "@omakase-ui/react-sortable-list" 5yarn # or yarn to install dependencies 6yarn start
1yarn run test
👤 Thaddeus Jiang
Give a ⭐️ if this project helped you!
Copyright © 2022 Thaddeus Jiang.
This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator
No vulnerabilities found.
No security vulnerabilities found.