A DnD list with a custom renderer for its items.
You can access the storybook for this component here.
The component accepts the props defined bellow in the table.
Name | Type | Required | Default | Description |
---|---|---|---|---|
getId | (item: unknown) => string | yes | - | It returns a unique ID for each item |
getItemClassName | (isDragging: boolean) => string | no | undefined | It returns the className for an item in the list |
getItemStyle | ((isDragging: boolean) => CSSProperties) | null | no | internal* | It returns the style for an item in the list |
getListClassName | (isDraggingOver: boolean) => string | no | undefined | It returns the className for the list |
getListStyle | ((isDraggingOver: boolean) => CSSProperties) | null | no | internal* | It returns the style for the list |
items | unknown[] | yes | - | The items rendered |
lockAxis | boolean | no | false | The dragged item keeps the direction |
propsDragDropContext | DragDropContextProps | no | - | Props passed to react-beautiful-dnd component |
propsDraggable | DraggableProps except draggableId, index | no | - | Props passed to react-beautiful-dnd component |
propsDroppable | DroppableProps except direction | no | - | Props passed to react-beautiful-dnd component |
onReorder | (items: unknown[]) => void | no | - | It is called when the items are reordered |
renderItem | (item: unknown, index: number, context: Context) => JSX.Element | yes | - | Render an item |
An undefined item can be used to signal the add new item. There should be at most one undefined item.
Context contains:
internal* - an internal style is used by default
Do not forget to provide null or a function returning an empty object for removing the default styling. The provided styles overwrite any internal styling.
GenericDndList uses | react-beautiful-dnd | React |
---|---|---|
1.0.x | 11.0.5 | 16.8.5 |
1.1.x | 12.2.0 | 16.9.0 |
1.2.x | 13.0.0 | 16.9.0 |
2.0.x | 13.0.0 | 16.9.0 |
2.1.x | 13.0.0 | 16.9.0 or 17.0.0 |
2.2.x | 13.1.0 | 16.9.0 or 17.0.0 |
2.3.x | 13.1.0 | 16.9.0 or 17.0.0 |
3.0.x | 13.1.1 | 18.0.0 |
- Major - it will be increased if the major version of the dependat package changes or there are breaking changes in the code of GenericDndList
- Minor - it will be increased if no major version of the dependat package changes, but there are changes of the minor or patch versions of it
- Patch - it will be increased if there are no changes of the dependat packages, but there are non breaking changes in the code of GenericDndList
Displaying a list with add item at the bottom:
import * as React from "react";
import GenericDndList from "generic-dnd-list";
interface ListItem {
id: string;
text: string;
}
const items: (ListItem | undefined)[] = [ {
id: 'fruit-1',
text: 'Apple'
}, {
id: 'fruit-2',
text: 'Orange'
}, {
id: 'fruit-3',
text: 'Banana'
}, undefined];
class App extends React.Component {
render() {
return (
<div className="App">
<GenericDndList
items={items as unknown[]}
getId={this.getId}
renderItem={this.renderItem}
onReorder={this.handleReorder}
/>
</div>
);
}
private getId = (item: unknown) => (item ? item.id : 'new-fruit');
private renderItem = (item?: unknown) => (item ? <div>{item.text}</div> : <div>Use this to add a new fruit</div>);
private handleReorder = (items: unknown[]) => {}
}
export default App;
- generic-dnd-list is made publicly available
- Updated packages
- Updated packages
- Moved from npm to yarn
- Updated packages
- Updated packages
- Fixed crash produced by "export * from"
- Added two new props: getItemClassName and getListClassName
- Made GenericDndList generic
- Fixed GenericDndList definition in index.d.ts
- Improved the definition of GenericDndList in index.d.ts
- The default style is no longe applied (except user-select:none for items) if a getStyle function is provided.
- Accepting React 17 as peerDependencies
- Fixed security warnings
- Added the possibility to lock the moved item on the vertical axis
- Added the possibility to pass props to react-beautiful-dnd components
- Added a context argument to render item function
- Improved the documentation
- Fixed the broken typedef in 2.3.0
- Fixed the broken typedef in 2.3.0
- Updated the packages
- onResize prop is no longer required
- Updated the packages
- Supports minimum React 18
- Updated the packages
- Fixed bundled lib