Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-drag-drop-list
Advanced tools
Readme
This component lets you make a user re-orderable list that animates nicely so that the user can easily move large items:
The above example can be tried here:
https://streakyc.github.io/react-draggable-list/example/
You can find its code in the example
directory. The example may be compiled
by running:
npm install
npm run example-build
You can build the example with live editing enabled (using react-transform-hmr and browserify-hmr) by running:
npm run example-watch
This module exports the DraggableList
React component, which takes the
following props:
list
must be an array of objects representing your list's items.itemKey
must be the name of a property of the list's objects to use as a
key to identify the objects, or it must be a function that takes an object as
an argument and returns a key.template
must be a React component used to render the list items. This must
not be a stateless-functional component. If possible, don't pass a new
class instance on every render. See the next section for more information
on the template including a description of the props passed to the component.onMoveEnd
may be a function which will be called when the user drags and
drops an item to a new position in the list. The arguments to the function
will be (newList: Array<Object>, movedItem: Object, oldIndex: number, newIndex: number)
.container
: If the DraggableList is inside a scrollable element, then this
property should be set to a function which returns a reference to it. When the
user moves an item in the list, the container will be scrolled to keep the
item in view. If the DraggableList is in no scrollable elements besides the
page itself, then a function returning a reference to document.body
should
be given.springConfig
is an optional object which sets the SpringHelperConfig
object passed to
React-Motion
for animations. This prop defaults to {stiffness: 300, damping: 50}
.padding
is an optional number of pixels to leave between items. Defaults tounsetZIndex
is an optional property that defaults to false. If set to true,
then the z-index of all of the list items will be set to "auto" when the list
isn't animating. This may have a small performance cost when the list starts
and stops animating. Use this if you need to avoid having the list item create
a stacking context when it's not being animated.A DraggableList instance has the following methods:
getItemInstance(key)
will return a reference to the mounted instance of the
template for a given key.The template component is passed the following props:
item
is an object from the list prop passed to DraggableList.itemSelected
is a number from 0 to 1. It starts at 0, and quickly increases
to 1 when the item is picked up by the user. This may be used to animate the
item when the user picks it up or drops it.anySelected
is a number from 0 to 1. It starts at 0, and quickly increases
to 1 when any item is picked up by the user.dragHandle
is a function which should be used during rendering to wrap the
element to be used as the drag handle. The whole item will be draggable by the
wrapped element.The template component should be styled with max-height set to "100%" for best results.
The template component will have its props updated many times quickly during
the animation, so implementing shouldComponentUpdate
in its children is
highly recommended.
The template component may have a getDragHeight
method which may return a
number to set the height in pixels of the item while the user is dragging it.
If the method returns null or is not present, then the drag height will be
equal to the element's natural height.
Flow type declarations for this module are included! As
of Flow v0.22, you must add the following entries to your .flowconfig
file's
options section for them to work:
[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
FAQs
Make a list of items draggable and sortable
The npm package react-drag-drop-list receives a total of 0 weekly downloads. As such, react-drag-drop-list popularity was classified as not popular.
We found that react-drag-drop-list demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.