0.0.5 • Published 3 years ago
@human-tools/use-sortable v0.0.5
useSortable
Simple implementation that allows you to reorder items easily using useSortable hook.
Options
- Optional
draggingClassNames
:string[]
- Default:['dragging']
- Optional
dragoverClassNames
:string[]
- Default:['dragover']
- Optional
animate
:boolean
- Default:true
- Optional
animationDelayFunction
:(index: number) => number
- Default:() => 0
- Optional
animationDurationFunction
:(index: number) => number
- Default:() => 0.3
- Optional
animationTimingFunction
:(index: number) => string
- Default:() => 'cubic-bezier(0, 1.28, 1, 1)'
Installing
yarn add @human-tools/use-sortable
# OR
npm install @human-tools/use-sortable
Example
import { useState } from 'react';
import * as ReactDOM from 'react-dom';
import { useSortable } from '@human-tools/use-sortable';
import './index.css';
const App = (): JSX.Element => {
const [items] = useState<number[]>(
new Array(30).fill(0).map<number>((_, i) => i)
);
const { orderedItems, setItems, setContainerRef, addDraggableNodeRef } = useSortable<number>(
items,
{}
);
return (
<div>
<div className="card-container" ref={setContainerRef}>
{orderedItems.map(item => (
<div className="card" key={item} ref={addDraggableNodeRef}>
{item + 1}
</div>
))}
</div>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
.card-container {
display: flex;
flex-wrap: wrap;
}
.card {
font-size: 56px;
color: #ddd;
background-color: white;
padding: 30px;
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);
margin: 10px;
cursor: grab;
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.card:hover {
background-color: slategrey;
}
.card.dragover {
box-shadow: 1px 1px 15px 0 rgba(0, 128, 128, 1);
}
.card.dragging {
cursor: grabbing;
opacity: 0.2;
}
Contributing
The package uses @pika/pack
to build and publish the library. The example
directory is a small snowpack
react app.
If you want to work on the src of the library while using the example as a scratchpad to see your changes, run:
yarn start
in the root directory - This will watch thesrc/
and copy the files toexample/src/use-sortable-lib
directoryyarn start
in theexample
directory - This will start the normalsnowpack dev
server and watch example files and hmr appropriately.
This setup is mainly because snowpack
still doesn't have a good support for yarn/npm link
'd packages.
Deploying Updated Example Site
This will happen automatically using Netlify
, all you need to do is merge updated files in.
Publishing new version of @human-tools/use-sortable
Currently one of the maintainers have to run npx pika publish
and follow the prompts. This will probably eventually be automated anytime master
branch is updated.
License
MIT