Feedback on my implementation of roact and otter

Help and Feedback Code Review
1

Hello, I started learning roact and otter today (omg can it be confusing to understand for a noob like me) and I started to create a basic custom chat system. Here is what I have so far:

https://gyazo.com/e68275c5802305b6e48622d2e5ff8246

Being the complete noob I am, I have no idea if my implementation is actually any good. Any feedback is appreciated!

Here is the applicable code:

local roact -- NOTE: ROACT AND OTTER MODULES ARE LOADED BY THE INIT FUNCTION IN AREOGAMEFRAMEWORK
local otter

local function initComponent()
    local chatComponent = roact.Component:extend("chat")

    function chatComponent:init()
        self:setState({
            chatboxScale = 100
        })

        self.chatboxInteractionHoverMotor = otter.createSingleMotor(100)
    end

    function chatComponent:render()
        return roact.createElement("Frame", {
            Size = UDim2.new(0, 300, 0, 200)
        }, {
            roact.createElement("TextBox", {
                Size = UDim2.new(0, 300, 0, 50),
                AnchorPoint = Vector2.new(0, 1),
                Position = UDim2.new(0, 0, 1, 0),

                [roact.Event.FocusLost] = function(rbx, enterPressed)
                    if enterPressed then
                        rbx.Text = ""
                    end

                    self.chatboxInteractionHoverMotor:setGoal(otter.spring(100))
                end,

                [roact.Event.Focused] = function(_)
                    self.chatboxInteractionHoverMotor:setGoal(otter.spring(120))
                end

            }, {
                roact.createElement("UIScale", {
                    Scale = self.state.chatboxScale / 100
                })
            }),
        })
    end

    function chatComponent:didMount()
        self.chatboxInteractionHoverMotor:onStep(function(size)
            self:setState(function(_)
                return {
                    chatboxScale = size
                }
            end)
        end)
    end

    chat.component = chatComponent
end
2 Likes