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 : 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 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")
Keeps track of how many rows we need.
initState : Config msg -> State
Sets up the initial State
for the textarea using a Config
.
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
)
[]