UIStrokeScale React Component

Resources Community Resources
, , , ,
#1

This is a React component that makes UIStroke scale based on an UDim instead of the Thickness property, using @batteryday’s implementation of UIStrokeScale

Unlike UIStrokeScale, this does not create an UDim attribute and is incompatible with any invasive stroke scaling solutions or plugins

You’re intended to use this as a replacement of the UIStroke object

React.createElement(UIStrokeScale, {Thickness = UDim.new(0.1, 0)})
View Code 
local React = require(pathToReact)

local function UIStrokeScale(props: {Thickness: UDim, Color: Color3?, Transparency: number?, ApplyStrokeMode: Enum.ApplyStrokeMode?})
	local strokeRef = React.useRef(nil) :: {current: UIStroke?}
	local thickness, setThickness = React.useBinding(0)
	
	React.useEffect(function()
		if not strokeRef.current then return end
		local parent = strokeRef.current.Parent
		
		if not parent or not parent:IsA('GuiBase2d') then
			warn('stroke parent not a GuiBase2D')
			return
		end
		
		local function updateThickness()
			local averageSize = (parent.AbsoluteSize.X + parent.AbsoluteSize.Y) / 2
			
			setThickness(props.Thickness.Scale * averageSize / 10 + props.Thickness.Offset)
		end
		
		local connections: {RBXScriptConnection} = {}
		table.insert(connections, parent:GetPropertyChangedSignal("AbsoluteSize"):Connect(updateThickness))
		
		updateThickness()
		
		return function()
			for _, c in connections do
				c:Disconnect()
			end
			
			table.clear(connections)
		end
		
	end, {})
	
	return React.createElement('UIStroke', {
		ref = strokeRef,
		Thickness = thickness,
		Color = props.Color,
		LineJoinMode = Enum.LineJoinMode.Round,
		Transparency = props.Transparency,
		ApplyStrokeMode = props.ApplyStrokeMode or Enum.ApplyStrokeMode.Contextual
	})
end

return UIStrokeScale
1 Like