react-sortablejs
- Version 6.1.4
- Published
- 74.1 kB
- 2 dependencies
- MIT license
Install
npm i react-sortablejs
yarn add react-sortablejs
pnpm add react-sortablejs
Overview
React bindings to [SortableJS](https://github.com/SortableJS/Sortable)
Index
Classes
Interfaces
Type Aliases
Classes
class ReactSortable
class ReactSortable<T extends ItemInterface> extends Component< ReactSortableProps<T>> {}
constructor
constructor(props: ReactSortableProps<T>);
property defaultProps
static defaultProps: Partial<ReactSortableProps<any>>;
method callOnHandlerProp
callOnHandlerProp: (evt: SortableEvent, evtName: AllMethodsExceptMove) => void;
Calls the
props.on[Handler]
function
method componentDidMount
componentDidMount: () => void;
method componentDidUpdate
componentDidUpdate: (prevProps: ReactSortableProps<T>) => void;
method makeOptions
makeOptions: () => Options;
Converts all the props from
ReactSortable
into theoptions
object thatSortable.create(el, [options])
can use.
method onAdd
onAdd: (evt: MultiDragEvent) => void;
method onChoose
onChoose: (evt: SortableEvent) => void;
method onDeselect
onDeselect: (evt: MultiDragEvent) => void;
method onEnd
onEnd: () => void;
method onRemove
onRemove: (evt: MultiDragEvent) => void;
method onSelect
onSelect: (evt: MultiDragEvent) => void;
method onSpill
onSpill: (evt: SortableEvent) => void;
method onStart
onStart: () => void;
method onUnchoose
onUnchoose: (evt: SortableEvent) => void;
method onUpdate
onUpdate: (evt: MultiDragEvent) => void;
method prepareOnHandlerProp
prepareOnHandlerProp: ( evtName: Exclude<AllMethodsExceptMove, HandledMethodNames>) => (evt: SortableEvent) => void;
Prepares a method that will be used in the sortable options to call an
on[Handler]
prop
method prepareOnHandlerPropAndDOM
prepareOnHandlerPropAndDOM: ( evtName: HandledMethodNames) => (evt: SortableEvent) => void;
Prepares a method that will be used in the sortable options to call an
on[Handler]
prop & anon[Handler]
ReactSortable method.
method render
render: () => JSX.Element;
Interfaces
interface ItemInterface
interface ItemInterface {}
property chosen
chosen?: boolean;
When true, the item is deemed "chosen", which basically just a mousedown event.
property filtered
filtered?: boolean;
When true, it will not be possible to pick this item up in the list.
property id
id: string | number;
The unique id associated with your item. It's recommended this is the same as the key prop for your list item.
property selected
selected?: boolean;
When true, the item is selected using MultiDrag
index signature
[property: string]: any;
interface ReactSortableProps
interface ReactSortableProps<T> extends ReactSortableOptions, Omit<Options, AllMethodNames> {}
property children
children?: ReactNode;
property className
className?: string;
property clone
clone?: (currentItem: T, evt: SortableEvent) => T;
If this is provided, the function will replace the clone in place.
When an is moved from
A
toB
withpull: 'clone'
, the original element will be moved toB
and the new clone will be placed inA
property id
id?: string;
property list
list: T[];
The list of items to use.
property setList
setList: (newState: T[], sortable: Sortable | null, store: Store) => void;
Sets the state for your list of items.
property style
style?: CSSProperties;
property tag
tag?: ForwardRefExoticComponent<RefAttributes<any>> | keyof ReactHTML;
If parsing in a component WITHOUT a ref, an error will be thrown.
To fix this, use the
forwardRef
component.Example 1
forwardRef<HTMLElement, YOURPROPS>((props, ref) => <button {...props} ref={ref} />)
Type Aliases
type AllMethodNames
type AllMethodNames = | 'onAdd' | 'onChange' | 'onChoose' | 'onClone' | 'onEnd' | 'onFilter' | 'onMove' | 'onRemove' | 'onSort' | 'onSpill' | 'onStart' | 'onUnchoose' | 'onUpdate' | 'onSelect' | 'onDeselect';
All method names starting with
on
inSortable.Options
type AllMethodsExceptMove
type AllMethodsExceptMove = Exclude<AllMethodNames, 'onMove'>;
Same as
SortableMethodKeys
type but with out the stringonMove
.
type HandledMethodNames
type HandledMethodNames = | 'onAdd' | 'onRemove' | 'onUpdate' | 'onStart' | 'onEnd' | 'onSpill' | 'onSelect' | 'onDeselect' | 'onChoose' | 'onUnchoose';
Method names that fire in
this
, when this is react-sortable
type ReactSortableOptions
type ReactSortableOptions = Partial< Record< AllMethodsExceptMove, (evt: SortableEvent, sortable: Sortable | null, store: Store) => void >> & { /** * The default sortable behaviour has been changed. * * If the return value is void, then the defaults will kick in. * it saves the user trying to figure it out. * and they can just use onmove as a callback value */ onMove?: ( evt: MoveEvent, originalEvent: Event, sortable: Sortable | null, store: Store ) => boolean | -1 | 1 | void;};
Change the
on[...]
methods in Sortable.Options, so that they all have an extra arg that isstore: Store
type UnHandledMethodNames
type UnHandledMethodNames = Exclude< AllMethodsExceptMove, HandledMethodNames | 'onMove'>;
Package Files (1)
Dependencies (2)
Dev Dependencies (30)
- @commitlint/cli
- @commitlint/config-conventional
- @parcel/packager-ts
- @parcel/transformer-typescript-types
- @semantic-release/changelog
- @semantic-release/git
- @types/jest
- @types/node
- @types/react
- @types/react-dom
- @types/sortablejs
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- commitizen
- cz-conventional-changelog
- eslint
- eslint-plugin-react
- husky
- jest
- lint-staged
- npm-run-all
- parcel
- prettier
- react
- react-dom
- semantic-release
- sortablejs
- ts-jest
- ts-node
- typescript
Peer Dependencies (4)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-sortablejs
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-sortablejs)
- HTML<a href="https://www.jsdocs.io/package/react-sortablejs"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 2534 ms. - Missing or incorrect documentation? Open an issue for this package.