Noosphere Possibilities Maximized

    @adrianbielawski/orderable-list
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.10 • Public • Published

    Orderable list

    Quick start

    $ npm i @adrianbielawski/orderable-list

    See examples

    import OrderableList, { OnDropParams, OnRemoveParams } from '@adrianbielawski/orderable-list'
    import ToDoItem from './toDoItem'
    
    const initialItems = ['Buy something', 'Take a walk']
    
    const ToDoList = () => {
        const [items, setItems] = useState<string[]>(initialItems)
    
        const handleAdd = (value: string) => {
            setItems([value, ...items])
        }
    
        const handleDrop = (params: OnDropParams<string>) => {
            setItems(params.newItems)
        }
    
        const handleRemove = (params: OnRemoveParams<string>) => {
            setItems(params.newItems)
        }
    
        return (
            <>
                <YourFancyForm onSubmit={handleAdd} />
                <OrderableList
                    items={items}
                    itemComponent={ToDoItem}
                    onDrop={handleDrop}
                    onRemove={handleRemove}
                />
            </>
        )
    }

    Orderable list props

    Name Type Description
    items any[] Array of items displayed on the list.
    itemComponent React component Lern more in ItemComponent docs.
    className srting Class name for <ul> element.
    itemClassName srting Class name for <li> element.
    animationDirection 'right' or 'left' Direction of animation on removed item. Initial 'left'.
    scrollTopAt number Scroll body when grabbed element reach n pixels from the top. Initial 30.
    scrollBottomAt number Scroll body when grabbed element reach n pixels from the bottom. Initial 30.
    onDrop function Use it to change your state of list items after reordering. Function takes params: OnDropParams<T> object with { newPosition: number, item: T, newItems: T[] }.
    onRemove function Use it to change your state of list items after removing. Function takes params: OnRemoveParams<T> object with { item: T, newItems: T[] }.

    Item component

    Create your ItemComponent which optionaly contains Grabbable and RemoveButton:

    import OrderableList, { ItemComponentProps } from '@adrianbielawski/orderable-list'
    
    const ToDoItem = (props: ItemComponentProps<string>) => (
        <OrderableList.Grabbable className="to-do-item">
            {params.item}
            <OrderableList.RemoveButton className="remove-button">
                Remove
            </OrderableList.RemoveButton>
        </OrderableList.Grabbable>
    )
    
    export default ToDoItem

    See examples for different scenarios

    ItemComponent takes following props

    Name Type Description
    item any Item from the items array passed to OrderableList
    index number Current position on the list starts from 0
    grabbed boolean true if user grab this item

    Keywords

    none

    Install

    npm i @adrianbielawski/orderable-list

    DownloadsWeekly Downloads

    2

    Version

    0.1.10

    License

    ISC

    Unpacked Size

    1.55 MB

    Total Files

    23

    Last publish

    Collaborators

    • adrianbielawski