ohanhi / autoexpand / AutoExpand

This library lets you use automatically expanding textareas in Elm. This means the textarea grows in height until it reaches the maximum number of rows allowed and then becomes a scrollable box.

View

view : Config msg -> State -> String -> Html msg

Show the textarea on your page.

view : Model -> Html Msg
view model =
    AutoExpand.view config model.autoExpandState model.textValue

Configuration


type Config msg

Configuration for your textarea, describing the look and feel.

Note: Your Config should never be held in your model. It should only appear in view code.

config : { onInput : { textValue : String, state : State } -> msg, padding : Basics.Float, lineHeight : Basics.Float, minRows : Basics.Int, maxRows : Basics.Int } -> Config msg

Create the Config for the auto expanding textarea.

A typical configuration might look like this:

type Msg
    = AutoExpandInput { textValue : String, state : AutoExpand.State }

config : AutoExpand.Config Msg
config =
    AutoExpand.config
        { onInput = AutoExpandInput
        , padding = 10
        , lineHeight = 20
        , minRows = 1
        , maxRows = 4
        }

withAttribute : Html.Attribute msg -> Config msg -> Config msg

Add your own attributes for the textarea.

myConfig
    |> withAttribute (Html.Attributes.class "chat-textbox")
    |> withAttribute (Html.Attributes.placeholder "jane.dow@example.com")

State


type State

Keeps track of how many rows we need.

initState : Config msg -> State

Sets up the initial State for the textarea using a Config.

Custom textareas

attributes : Config msg -> State -> String -> List (Html.Attribute msg)

Get the attributes needed for a custom textarea. Note that you may accidentally break functionality by including some attributes twice.

textarea
    ([ placeholder "Custom..." ]
        ++ AutoExpand.attributes
            myConfig
            model.autoExpandState
            model.textValue
    )
    []