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 : Float

, lineHeight : Float

, minRows : Int

, maxRows : 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
        }

withId : String -> Config msg -> Config msg

Add the id attribute to the configuration.

myConfig
    |> withId "chat-message-textarea"

withClass : String -> Config msg -> Config msg

Add the class attribute to the configuration.

myConfig
    |> withClass "textarea has-inset-shadow"

withPlaceholder : String -> Config msg -> Config msg

Add the placeholder attribute to the configuration.

myConfig
    |> withPlaceholder "Type a message here"

withStyles : List ( String, String ) -> Config msg -> Config msg

Add inline styles for the textarea.

myConfig
    |> withStyles [ ( "font-family", "sans-serif" ) ]

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 (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
    )
    []

Modules

AutoExpand