Forest Logo
search
package_2

react-dnd

By @miizzuu

Roblox

Mirrored

React DnD

An implementation of React DnD for React-Lua.

Example

local function DragFrame()
	local ref = ReactDnd.useDrag({
		class = "frame",
		item = { "cool item" },
		canDrag = true,
		onDragStart = function()
			print("Drag started!")
		end,
		onDragEnd = function(didDrop, dropResult)
			print("Drag ended!", didDrop, dropResult)
		end,
		--ref = myRef
	})

	return e("Frame", {
		AnchorPoint = Vector2.new(0.5, 0.5),
		Position = UDim2.fromScale(0.2, 0.5),
		Size = UDim2.fromOffset(200, 50),
		ref = ref,
	})
end

local function DropFrame()
	local ref = ReactDnd.useDrop({
		accept = { "frame" },
		canDrop = true,
		onHover = function(item, isHovering, canDrop)
			print("Hover!", item, isHovering, canDrop)
		end,
		onDrop = function(item)
			print("Dropped!", item)
			return { "amazing drop result" }
		end,
		--ref = myRef
	})

	return e("Frame", {
		AnchorPoint = Vector2.new(0.5, 0.5),
		Position = UDim2.fromScale(0.8, 0.5),
		Size = UDim2.fromOffset(200, 50),
		ref = ref,
	})
end

local function Example()
	return e(ReactDnd.DndProvider, {
		--createBackend = function(store) end
	}, {
		Example = e("ScreenGui", {}, {
			DragFrame = e(DragFrame),
			DropFrame = e(DropFrame),
		}),
	})
end

Package Details

Install command (Click to copy)


Version

0.1.3

License

MIT

check_circle

Safe for commercial use

infoLicense identified from the packaged LICENSE file; the manifest declared none.

Automated license review — not legal advice.